pref: 优化公共接口管理部分代码

-<template>
-  <div class="table-content">
-    <!-- 采用的原生表格 -->
-    <table align="center">
-      <thead>
-        <tr>
-          <th v-for="item in editCellTableTHeadConfig" :key="item">{{ item }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(item, index) in tableArray.content" :key="index">
-          <td>
-            {{ index + 1 }}
-          </td>
-          <td style="width: 12vw">
-            <Select
-              v-model:value="item.key"
-              placeholder="请选择"
-              :options="selectOptions"
-              @change="handleChange"
-              @dropdownVisibleChange="hanldeDropdownVisibleChange"
-              allowClear
-            />
-          </td>
-          <td style="width: 12vw">
-            <div v-if="item.key === 'date_range'">
-              <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date1" />
-              <span>~</span>
-              <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" />
-            </div>
-            <div v-else>
-              <a-input
-                :disabled="item.editDisabled"
-                placeholder="请输入"
-                v-model:value="item.value"
-              />
-            </div>
-          </td>
-          <td style="width: 4vw">
-            <a-switch v-model:checked="item.required" />
-          </td>
-          <td style="width: 4vw">
-            <div>
-              <Button type="dashed" @click="add(item, index)">
-                <template #icon><PlusOutlined /></template
-              ></Button>
-              <Button type="dashed" style="margin-left: 5px" @click="remove(item, index)">
-                <template #icon> <MinusOutlined /></template>
-              </Button>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-<script lang="ts" setup name="editCellTable">
-  import { reactive, ref, onMounted, nextTick } from 'vue';
-  import { Select, Button } from 'ant-design-vue';
-  import { findDictItemByCode } from '/@/api/system/dict';
-  import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
-  import { editCellTableTHeadConfig } from '../../../config/config';
-  import { selectType, tableItems } from '../../../config/types';
-
-  defineProps({
-    method: {
-      type: String,
-    },
-  });
-
-  const selectOptions = ref<selectType[]>([]);
-
-  onMounted(() => {
-    getSelectOptions();
-  });
-
-  const getSelectOptions = async () => {
-    const res = await findDictItemByCode({ dictCode: 'dataview_builtin_params' });
-    selectOptions.value = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
-    selectOptions.value.push({
-      label: '自定义',
-      value: 'scope',
-    });
-  };
-
-  const tableArray = reactive<{
-    content: tableItems[];
-  }>({
-    content: [
-      {
-        key: undefined,
-        value: '',
-        editDisabled: false,
-        required: false,
-        date1: '',
-        date2: '',
-      },
-    ],
-  });
-
-  // 新增
-  const add = (_, index: number) => {
-    tableArray.content.splice(index + 1, 0, {
-      key: undefined,
-      value: '',
-      editDisabled: false,
-      required: false,
-      date1: '',
-      date2: '',
-    });
-  };
-
-  // 减少
-  const remove = (item, index: number) => {
-    if (tableArray.content.length > 1) {
-      selectOptions.value.forEach((ele) => {
-        if (ele.value == item.key) {
-          ele.disabled = false;
-        }
-      });
-      tableArray.content.splice(index, 1);
-    } else {
-      resetValue();
-    }
-  };
-
-  const hanldeDropdownVisibleChange = () => handleChange();
-
-  //Select互斥
-  const handleChange = () => {
-    selectOptions.value.forEach((ele) => {
-      ele.disabled = false;
-      tableArray.content.forEach((element) => {
-        if (element.key === 'scope' || element.key === 'fixed_date') {
-          element.editDisabled = false;
-        } else {
-          element.value = '';
-          element.editDisabled = true;
-        }
-        if (element.key === ele.value && element.key !== 'scope' && element.key !== 'fixed_date') {
-          ele.disabled = true;
-        }
-      });
-    });
-  };
-
-  //获取数据
-  const getValue = () => {
-    const assemblyData = tableArray.content.map((it) => {
-      return {
-        key: it.key,
-        value: it.key === 'date_range' ? `${it.date1},${it.date2}` : it.value,
-        editDisabled: it.editDisabled,
-        required: it.required,
-      };
-    });
-    return assemblyData;
-  };
-
-  //设置数据
-  const setValue = async (data) => {
-    await nextTick();
-    const assemblyData = data.map((it) => {
-      return {
-        key: it.key,
-        value: it.value,
-        editDisabled: it.editDisabled,
-        required: it.required,
-        date1: it.key === 'date_range' ? it.value?.split(',')?.at(-2) : '',
-        date2: it.key === 'date_range' ? it.value?.split(',')?.at(-1) : '',
-      };
-    });
-    tableArray.content = assemblyData;
-    tableArray.content.forEach(() => {
-      handleChange();
-    });
-  };
-
-  //重置数据
-  const resetValue = () => {
-    tableArray.content = [];
-    tableArray.content.push({
-      key: undefined,
-      value: '',
-      editDisabled: false,
-      required: false,
-      date1: '',
-      date2: '',
-    });
-    nextTick(() => {
-      tableArray.content.forEach(() => {
-        handleChange();
-      });
-    });
-  };
-  defineExpose({
-    getValue,
-    setValue,
-    resetValue,
-  });
-</script>
-
-<style scoped lang="less">
-  @table-color: #e5e7eb;
-
-  .table-border-color {
-    border: 1px solid #e5e7eb;
-    text-align: center;
-  }
-
-  .table-content {
-    overflow-x: auto;
-
-    table {
-      border-collapse: collapse;
-      width: 35vw;
-      &:extend(.table-border-color);
-    }
-
-    table thead {
-      white-space: nowrap;
-    }
-
-    table td {
-      padding: 5px;
-      white-space: nowrap;
-      &:extend(.table-border-color);
-    }
-
-    table th {
-      padding: 5px;
-      &:extend(.table-border-color);
-    }
-  }
-</style>