elementUI select 组件封装

组件：

<template>
  <el-form-item size="small">
    <span class=" display: inline-block;"> 第 {{ index + 1 }} 次：</span>
    <el-select
      :value="startEndTimeObj.lable"
      placeholder="清选择"
      @change="getStartEndTime"
    >
      <el-option
        v-for="subItem in items"
        :key="subItem.index + 'option'"
        :label="subItem.lable"
        :value="subItem.lable"
      >
      </el-option>
    </el-select>
    <i class="el-icon-delete-solid execute-del" @click="executeDel"></i>
  </el-form-item>
</template>

<script>
export default {
  name: 'execute-option',
  components: {},
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      },
    },
    index: {
      type: Number,
      required: true,
    },
    items: {
      type: Array,
      default: Array,
    },
  },
  watch: {},
  data() {
    return {
      startEndTimeObj: {},
      name: '',
    };
  },
  computed: {},
  created() {
    this.startEndTimeObj = this.value;
  },
  methods: {
    getStartEndTime(val) {
      let vm = this;
      if (vm.startEndTimeObj && vm.startEndTimeObj.lable) {
        this.items.push(this.startEndTimeObj);
        this.items = this.items.sort((a, b) => {
          return a.lable >= b.lable ? 1 : -1;
        });
      }
      this.items.forEach((e) => {
        vm.startEndTimeObj = e.lable == val ? e : vm.startEndTimeObj;
      });
      this.items = this.items.filter((e) => e.lable != val);

      this.$emit('update:items', this.items);
      this.$emit('input', this.startEndTimeObj);
    },
    executeDel: function() {
      if (this.startEndTimeObj && this.startEndTimeObj.index) {
        this.items.push(this.startEndTimeObj);
        this.items = this.items.sort((a, b) => {
          return a.lable >= b.lable ? 1 : -1;
        });
        this.$emit('update:items', this.items);
        this.$emit('deleteIndex', {
          lable: this.startEndTimeObj.lable,
          index: this.index,
        });
      } else {
        this.$emit('deleteIndex', {
          lable: null,
          index: this.index,
        });
      }
    },
  },
};
</script>

父组件

<template>
  <div class="statistics mt30">
    <div class="header">
      <div class="title-head">
        居家隔离管理配置
      </div>
      <el-form>
        <div class="title-menu">
          核酸检测计划
          <el-button
            class="save-btn"
            size="small"
            type="primary"
            @click="saveData()"
            >保存</el-button
          >
        </div>
        <el-form-item size="small" label="起始时间">
          <el-select
            v-model="startEndTime"
            style="width: 20%"
            filterable
            placeholder="清选择"
            @change="getStartEndTime"
          >
            <el-option
              v-for="item in startEndDate"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="执行计划"> </el-form-item>
        <div class="execute-dom">
          <executeOption
            v-for="(item, index) in executeList"
            :items.sync="executeOption"
            :index="index"
            :key="index + 'execute' + new Date().getTime()"
            v-model="executeList[index]"
            class="execute-item"
            @deleteIndex="del($event, 'executeList')"
          ></executeOption>

          <div class="form-btns">
            <el-button
              size="small"
              icon="el-icon-plus"
              type="primary"
              plain
              @click="addRow()"
              >新增一条</el-button
            >
          </div>
        </div>
        <div class="title-menu">血清检测计划</div>
        <el-form-item size="small" label="起始时间">
          <el-select
            v-model="startEndTime1"
            style="width: 20%"
            filterable
            placeholder="清选择"
            @change="getStartEndTime"
          >
            <el-option
              v-for="item in startEndDate1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item size="small" label="执行计划"> </el-form-item>
        <div class="execute-dom">
          <executeOption
            v-for="(item, index) in executeList1"
            :items.sync="executeOption1"
            :index="index"
            :key="index + 'execute1' + new Date().getTime()"
            v-model="executeList1[index]"
            class="execute-item"
            @deleteIndex="del($event, 'executeList1')"
          ></executeOption>

          <div class="form-btns">
            <el-button
              size="small"
              icon="el-icon-plus"
              type="primary"
              plain
              @click="addRow1()"
              >新增一条</el-button
            >
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import executeOption from './execute-option';
export default {
  name: 'medical-check-config-index',
  components: { executeOption },
  data() {
    return {
      test: [],
      options: [
        { index: 1, value: 1, lable: '第一天' },
        { index: 2, value: 2, lable: '第二天' },
        { index: 3, value: 3, lable: '第三天' },
        { index: 4, value: 4, lable: '第四天' },
        { index: 5, value: 5, lable: '第五天' },
        { index: 6, value: 6, lable: '第六天' },
        { index: 7, value: 7, lable: '第七天' },
        { index: 8, value: 8, lable: '第八天' },
        { index: 9, value: 9, lable: '第九天' },
        { index: 10, value: 10, lable: '第十天' },
        { index: 11, value: 11, lable: '第十一天' },
        { index: 12, value: 12, lable: '第十二天' },
        { index: 13, value: 13, lable: '第十三天' },
        { index: 14, value: 14, lable: '第十四天' },
      ],
      executeOption: [],
      executeOption1: [],
      startEndDate: [
        {
          value: 1,
          label: '隔离第一天起计算',
        },
        {
          value: 2,
          label: '入境时间',
        },
      ],
      startEndDate1: [
        {
          value: 1,
          label: '隔离第一天起计算',
        },
        {
          value: 2,
          label: '入境时间',
        },
      ],
      startEndTime: '',
      startEndTime1: '',
      executeList: [{}],
      executeList1: [{}],
    };
  },
  computed: {},
  created() {
    this.getData();
    this.executeOption = this.options;
    this.executeOption1 = this.options;
  },
  methods: {
    getStartEndTime(val) {
      console.log(val);
    },
    addRow() {
      this.executeList.push({});
    },
    addRow1() {
      this.executeList1.push({});
    },

    del: function(obj, executeListName) {
      console.log(obj);
      console.log(executeListName);
      if (obj.lable) {
        this[executeListName] = this[executeListName].filter(
          (e) => e.lable != obj.lable,
        );
      } else {
        this[executeListName].splice(obj.index, 1);
      }
    },

    getData() {
      let vm = this;
      vm.$http({
        showModal: true,
        url: vm.api.ECECUT_POST_LIST,
        method: 'get',
      }).then((res) => {
        let list = res.data;
        if (list.code == 1) {
          list.data.forEach((el) => {
            if (el.category == 2 && el.type == 1) {
              //居家隔离管理配置-核酸检测计划
              vm.startEndTime =
                el.beginTime == 1 ? '隔离第一天起计算' : '入境时间';
              vm.executeList = JSON.parse(el.planDetails);
              vm.executeOption = vm.executeOption.filter(
                (e) => !vm.executeList.some((m) => m.lable == e.lable),
              );
            } else if (el.category == 2 && el.type == 2) {
              //居家隔离管理配置-血清检测计划
              vm.startEndTime1 =
                el.beginTime == 1 ? '隔离第一天起计算' : '入境时间';
              vm.executeList1 = JSON.parse(el.planDetails);
              vm.executeOption1 = vm.executeOption1.filter(
                (e) => !vm.executeList1.some((m) => m.lable == e.lable),
              );
            }
          });
        }
      });
    },
    saveData() {
      let vm = this;
      if (vm.startEndTime) {
        vm.startEndTime = vm.startEndTime == '隔离第一天起计算' ? 1 : 2;
      } else {
        vm.startEndTime = 1;
      }
      let form = {
        id: 3,
        category: 2,
        type: 1,
        beginTime: vm.startEndTime,
        planDetails: JSON.stringify(vm.executeList),
      };
      vm.$http({
        showModal: true,
        url: vm.api.ECECUT_POST_UPDATE,
        method: 'post',
        data: form,
      }).then((res) => {
        if (res.data.code == 1) {
          this.$message({
            showClose: true,
            message: '保存成功',
            type: 'success',
          });
        }
      });
      if (vm.startEndTime1) {
        vm.startEndTime1 = vm.startEndTime1 == '隔离第一天起计算' ? 1 : 2;
      } else {
        vm.startEndTime1 = 1;
      }
      let form1 = {
        id: 4,
        category: 2,
        type: 2,
        beginTime: vm.startEndTime1,
        planDetails: JSON.stringify(vm.executeList1),
      };
      vm.$http({
        showModal: true,
        url: vm.api.ECECUT_POST_UPDATE,
        method: 'post',
        data: form1,
      }).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>