页面修改

src/components/tradePavilion/plugin/dropdown.vue

@@ -13,7 +13,8 @@
         <el-form label-width="90px">
           <el-form-item :label="searchData.CompData.Name" :required="searchData.CompData.IsRequire"
             style="margin-bottom:0">
-            <el-select v-model="defaultValue" style="width:328px;" :popper-append-to-body="false">
+            <el-select v-model="searchData.CompData.OptionValue" style="width:328px;" :popper-append-to-body="false"
+              :multiple="searchData.CompData.IsMultiple">
               <el-option v-for="item in searchData.CompData.OptionList" :key="item.Id" :label="item.Name"
                 :value="item.Id">
               </el-option>
@@ -31,17 +32,15 @@
         <el-form-item label="提示文字">
           <el-input type="textarea" v-model="searchData.CompData.Remark" size="small"></el-input>
         </el-form-item>
-        <el-form-item label="增加选项">
-          <el-tag :key="index" v-for="(item,index) in searchData.CompData.OptionList" style="margin-right:5px;" closable :disable-transitions="false" @close="handleClose(index)">
-            {{item.Name}}
-          </el-tag>
-          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" style="width:80px;" ref="saveTagInput" size="small"
-            @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
-          </el-input>
-          <el-button v-else class="button-new-tag" size="small" @click="showInput">增加选项</el-button>
+        <el-form-item label="下拉选项列表">
+          <template v-if="searchData.CompData.OptionList" v-for="(item,index) in searchData.CompData.OptionList">
+            <el-input v-model="item.Name" size="small" :key="index"></el-input> <a style="cursor:pointer"
+              @click="DeleteOption(index)"> 删除</a>
+          </template>
+          <el-button class="button-new-tag" size="small" @click="addOptionItem">添加选项</el-button>
         </el-form-item>
         <el-form-item label="是否多选">
-          <el-switch v-model="searchData.CompData.IsMultiple">
+          <el-switch v-model="searchData.CompData.IsMultiple" @change="MultipleChange">
           </el-switch>
         </el-form-item>
         <el-form-item label="是否必填">
@@ -64,6 +63,10 @@
     },
     created() {},
     methods: {
+      //单选多选切换
+      MultipleChange() {
+        this.searchData.CompData.OptionValue = "";
+      },
       //向父组件传值 并调用排序
       resetSord(IsUp) {
         this.$emit('getSord', this.index, IsUp);
@@ -74,8 +77,8 @@
       },
       handleClose(index) {
         this.searchData.CompData.OptionList.splice(index, 1);
-        this.searchData.CompData.OptionList.forEach((x,index)=>{
-          x.Id=index
+        this.searchData.CompData.OptionList.forEach((x, index) => {
+          x.Id = index
         })
       },
       showInput() {
@@ -84,21 +87,33 @@
           this.$refs.saveTagInput.$refs.input.focus();
         });
       },
-
-      handleInputConfirm() {
-        let inputValue = this.inputValue;
-        let obj={
-          Id:0,
-          Name:inputValue
+      //添加选项
+      addOptionItem() {
+        var index = 1;
+        if (this.searchData.CompData && this.searchData.CompData.OptionList) {
+          index = this.searchData.CompData.OptionList.length + 1;
+          this.searchData.CompData.OptionList.push({
+            Id: index.toString(),
+            Name: "",
+          });
         }
-        if (inputValue) {
-          this.searchData.CompData.OptionList.push(obj);
+        this.CalcOption();
+      },
+      //删除选项
+      DeleteOption(index) {
+        this.searchData.CompData.OptionList.splice(index, 1);
+        this.CalcOption();
+      },
+      //重新计算选项
+      CalcOption() {
+        if (this.searchData.CompData && this.searchData.CompData.OptionList) {
+          var tempData = JSON.parse(JSON.stringify(this.searchData.CompData.OptionList));
+          this.searchData.CompData.OptionList = [];
+          tempData.forEach((item, index) => {
+            item.Id = (index + 1).toString();
+            this.searchData.CompData.OptionList.push(item);
+          })
         }
-        this.inputVisible = false;
-        this.inputValue = '';
-        this.searchData.CompData.OptionList.forEach((x,index)=>{
-          x.Id=index
-        })
       }
     },
     mounted() {}