可以优化一下这段代码吗？ function echoValueByKey (id, list, key, value) { let res if (list.length == 0) { return "--" } else { if (Array.isArray(id)) { res = [] id?.forEach(item => { list?.forEach(item2 => { if (item == item2[key]) { res.push(item2[value]) } }) }) return res.join("、") || "--" } else { list?.forEach(item => { if (item[key] == id) { res = item[value] } }) return res || "--" } } }

可以优化这段代码。可以使用 Array.prototype.filter() 和 Array.prototype.map() 方法来简化代码，如下所示：

function echoValueByKey(id, list, key, value) {
let res;
if (list.length === ) {
return "--";
} else {
if (Array.isArray(id)) {
res = list.filter(item => id.includes(item[key])).map(item => item[value]);
return res.join("、") || "--";
} else {
res = list.find(item => item[key] === id)?.[value];
return res || "--";
}
}
}

相关问题

把这个页面使用Composition API重构要求用vue2编写且只要写export default 后面的代码主体代码template内的代码不用写

好的，以下是使用Vue 2的 Composition API 构造函数方式（`@vue/composition-api` 插件）重构后的 `export default` 主体部分：

<template>
  <!-- 组件模板部分内容保留不变 -->
</template>

<script>
import { reactive, toRefs, onMounted, computed, watch, ref } from '@vue/composition-api';
import { PRINT_DOM } from '@/store/mutation-types';
import MyFastDatePicker from '@/components/date/MyFastDatePicker';
import '@/assets/less/TableExpand.less';
import { mixinDevice } from '@/utils/mixin';
import { JeecgListMixin } from '@/mixins/JeecgListMixin';
import { getAction, postAction } from '@/api/manage';

export default {
  name: 'ProjectMaterialDetails',
  mixins: [JeecgListMixin, mixinDevice],
  components: { MyFastDatePicker },
  setup() {
    const state = reactive({
      nowFirst: 'projectCode',
      columnsKey: 0,
      projectNameList: [],
      projectName_Code: "",
      projectBudgetMarginWarning: 0,
      expandedRowKeys: [],
      workorderProjectList: [],
      description: '营业报表管理页面',
      fastTime: ['本月', '上月', '近半年'],
      noCreate: true,
      hasUpdateTime: true,
      configOrderSubTypeList: [],
      configOrderSubTypeTemp: undefined,
      allDepartList: [],
      hallCodeDataList: [],
      spinning: false,
      checkFlag: true,
      updateTime: '',
      url: {
        list: "/web/materialVoucherDetails/getProjectMaterialStatistic",
        exportXlsxUrl: "/web/materialVoucherDetails/exportProjectMaterialStatisticExcel",
        exportPdfUrl: "/web/bizBusinessRecord/exportpdf",
        exportDetailUrl: "/web/bizBusinessRecord/exportDetailExcel",
      },
      keyList: ['saleNum', 'saleName', 'terminalTypeName', 'userTypeName', 'configOrderMainTypeName', 'configOrderSubTypeName'],
      ipagination: {
        current: 1,
        pageSize: 20,
        pageSizeOptions: ['20', '50', '80'],
        showTotal: (total, range) => `${range[0]}-${range[1]} 共${total}条`,
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      originColums: [],
      columns: [
        // 表格列定义部分保留不变
      ],
      exportParams: {}
    });

    const beforeSearchQuery = () => {
      state.searchQuery();
      departChange(state.queryParam.type);
    };

    const beforeSearchReset = () => {
      state.searchReset();
      departChange();
    };

    const deepClone = (input, hash = new WeakMap()) => {
      if (input === null || typeof input !== 'object') return input;
      if (hash.has(input)) return hash.get(input);
      const output = Array.isArray(input) ? [] : {};
      hash.set(input, output);
      if (Array.isArray(input)) {
        output.push(...input.map(item => deepClone(item, hash)));
      } else {
        Object.keys(input).forEach(key => {
          if (typeof input[key] === 'function') {
            output[key] = input[key].bind(output);
          } else {
            output[key] = deepClone(input[key], hash);
          }
        });
      }
      return output;
    };

    const departChange = (val) => {
      if (val == 2) {
        state.nowFirst = 'orgCode_dictText';
        const objectArray = deepClone(state.originColums);
        const movedElement = objectArray.splice(3, 1)[0];
        objectArray.unshift(movedElement);
        state.columns = objectArray;
      } else {
        state.nowFirst = 'projectCode';
        state.columns = deepClone(state.originColums);
      }
      state.columnsKey += 1;
    };

    const renderMergedCells = (value, row, index, dataIndex) => {
      const obj = { children: value, attrs: {} };
      const dataSource = state.dataSource;
      if (dataIndex === 'projectCode') {
        if (index === 0 || row.projectCode_dictText !== dataSource[index - 1].projectCode_dictText) {
          let rowSpan = 1;
          for (let i = index + 1; i < dataSource.length; i++) {
            if (dataSource[i].projectCode_dictText === row.projectCode_dictText) {
              rowSpan++;
            } else {
              break;
            }
          }
          obj.attrs.rowSpan = rowSpan;
        } else {
          obj.attrs.rowSpan = 0;
        }
      } else if (dataIndex === 'orgCode_dictText') {
        if (index === 0 || row.orgCode_dictText !== dataSource[index - 1].orgCode_dictText || row.projectCode_dictText !== dataSource[index - 1].projectCode_dictText) {
          let rowSpan = 1;
          for (let i = index + 1; i < dataSource.length; i++) {
            if (dataSource[i].orgCode_dictText === row.orgCode_dictText && dataSource[i].projectCode_dictText === row.projectCode_dictText) {
              rowSpan++;
            } else {
              break;
            }
          }
          obj.attrs.rowSpan = rowSpan;
        } else {
          obj.attrs.rowSpan = 0;
        }
      } else {
        if (index === 0 || row.subProjectCode_dictText !== dataSource[index - 1].subProjectCode_dictText) {
          let rowSpan = 1;
          for (let i = index + 1; i < dataSource.length; i++) {
            if (dataSource[i].subProjectCode_dictText === row.subProjectCode_dictText) {
              rowSpan++;
            } else {
              break;
            }
          }
          obj.attrs.rowSpan = rowSpan;
        } else {
          obj.attrs.rowSpan = 0;
        }
      }
      return obj;
    };

    onMounted(() => {
      state.originColums = deepClone(state.columns);
      projectCodeSearch('');
      onChangeOrgCode();
      state.loadData(1);
      getAction('/web/bizWorkorder/getWorkorderProject', { workorderType: state.queryParam.workorderType })
        .then(res => {
          if (res.result?.statusInfo) {
            state.workorderProjectList = res.result.values;
          } else {
            state.workorderProjectList = [];
          }
        });
      postAction('/web/sysCompany/queryLoginCompany')
        .then(res => {
          state.projectBudgetMarginWarning = res.result.projectBudgetMarginWarning || 0;
        });
    });

    const searchQuery = () => {
      let val = state.configOrderSubTypeTemp;
      if (val) {
        if (state.queryParam.configOrderMainType == 1) {
          if (val.key.length == 2) {
            state.queryParam.configOrderSubType = val.key.substr(0, 1);
          } else {
            state.queryParam.configOrderSubType = val.key.substr(0, 2);
          }
        } else {
          state.queryParam.configOrderSubType = val.key;
        }
      }
      state.loadData(1);
    };

    const onChangeOrgCode = () => {
      getAction('/sys/sysDepart/listAll')
        .then(res => {
          if (res.success) {
            state.allDepartList = res.result.map(v => ({ text: v.departName, value: v.orgCode }));
          }
        });
    };

    // 其他方法按需移植...

    return {
      ...toRefs(state),
      renderMergedCells,
      materialInventoryResultChange: state.materialInventoryResultChange.bind(null, state),
      beforeSearchQuery,
      beforeSearchReset,
      deepClone,
      departChange,
      subProjectCodeChange: state.subProjectCodeChange.bind(null, state),
      projectCodeSearch,
      projectCodeChange: state.projectCodeChange.bind(null, state),
      change: state.change.bind(null, state),
      handelChange: state.handelChange.bind(null, state),
      getConfigOrderSubTypeList: state.getConfigOrderSubTypeList.bind(null, state),
      handleChange: state.handleChange.bind(null, state),
      handleConfigOrderSubTypeChange: state.handleConfigOrderSubTypeChange.bind(null, state),
      handleOpen: state.handleOpen.bind(null, state),
      filterOption: state.filterOption.bind(null, state),
      searchQuery
    };
  }
};
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
.tipItem {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid white;
  padding: 2px;
  div {
    margin: 2px 5px;
  }
}
.table-operator {
  display: flex;
  justify-content: space-between;
}
.ant-alert {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}
</style>

这个重构后的代码主要将原来使用 `Vue Options API` 编写的代码转换为了 `Vue Composition API`。关键的部分在于状态管理和生命周期钩子的迁移。希望这对你有所帮助！

重新生成这个页面使用Composition API重构要求用vue2编写且只要写export default 后面的代码要求方法全部都要重构主体代码template内的代码不用写

好的，以下是使用 Composition API 重构后的 `export default` 部分代码。请注意，Vue 2 并不原生支持 Composition API，但可以通过 `vue-composition-api` 插件来实现。以下代码假设你已经安装了 `vue-composition-api` 插件。

import Vue from 'vue';
import { ref, reactive, computed, watch, onMounted } from '@vue/composition-api';
import { PRINT_DOM } from "@/store/mutation-types";
import MyFastDatePicker from '@/components/date/MyFastDatePicker';
import '@/assets/less/TableExpand.less';
import { mixinDevice } from '@/utils/mixin';
import { JeecgListMixin } from '@/mixins/JeecgListMixin';
import { getAction, postAction } from '@/api/manage';

export default {
  name: 'ProjectMaterialDetails',
  mixins: [JeecgListMixin, mixinDevice],
  components: { MyFastDatePicker },
  setup() {
    const nowFirst = ref('projectCode');
    const columnsKey = ref(0);
    const projectNameList = ref([]);
    const projectName_Code = ref("");
    const projectBudgetMarginWarning = ref(0);
    const expandedRowKeys = ref([]);
    const workorderProjectList = ref([]);
    const description = ref('营业报表管理页面');
    const fastTime = ['本月', '上月', '近半年'];
    const noCreate = true;
    const hasUpdateTime = true;
    const configOrderSubTypeList = ref([]);
    const configOrderSubTypeTemp = ref(undefined);
    const allDepartList = ref([]);
    const hallCodeDataList = [];
    const spinning = ref(false);
    const checkFlag = ref(true);
    const updateTime = ref('');
    const url = reactive({
      list: "/web/materialVoucherDetails/getProjectMaterialStatistic",
      exportXlsxUrl: "/web/materialVoucherDetails/exportProjectMaterialStatisticExcel",
      exportPdfUrl: "/web/bizBusinessRecord/exportpdf",
      exportDetailUrl: "/web/bizBusinessRecord/exportDetailExcel",
    });
    const keyList = ['saleNum', 'saleName', 'terminalTypeName', 'userTypeName', 'configOrderMainTypeName', 'configOrderSubTypeName'];
    const ipagination = reactive({
      current: 1,
      pageSize: 20,
      pageSizeOptions: ['20', '50', '80'],
      showTotal: (total, range) => `${range[0]}-${range[1]} 共${total}条`,
      showQuickJumper: true,
      showSizeChanger: true,
      total: 0,
    });
    const originColums = ref([]);
    const columns = ref([
      { title: '项目编号', align: "center", dataIndex: 'projectCode', customRender: (text, row, index) => renderMergedCells(text, row, index, 'projectCode'), },
      { title: '项目名称', align: "center", dataIndex: 'projectCode_dictText', customRender: (text, row, index) => renderMergedCells(text, row, index, 'projectCode_dictText'), },
      { title: '（子）项目名称', align: "center", dataIndex: 'subProjectCode_dictText', customRender: (text, row, index) => renderMergedCells(text, row, index, 'subProjectCode_dictText'), },
      { title: '部门名称', align: "center", dataIndex: 'orgCode_dictText', customRender: (text, row, index) => renderMergedCells(text, row, index, 'orgCode_dictText'), },
      { title: '物资编号', align: "center", dataIndex: 'materialCode', scopedSlots: { customRender: 'publicText' } },
      { title: '物资名称', align: "center", dataIndex: 'materialName', scopedSlots: { customRender: 'publicText' } },
      { title: '厂商', align: "center", dataIndex: 'producerId_dictText', scopedSlots: { customRender: 'publicText' } },
      { title: '规格型号', align: "center", dataIndex: 'specification', scopedSlots: { customRender: 'publicText' } },
      { title: '单位', align: "center", dataIndex: 'unit', scopedSlots: { customRender: 'publicText' } },
      { title: '成本价（元）', align: "center", dataIndex: 'originPrice', scopedSlots: { customRender: 'publicText' } },
      { align: "center", dataIndex: 'requisitionNum', slots: { title: 'requisitionNum_title' }, scopedSlots: { customRender: 'publicText' } },
      { title: '施工用料', align: "center", dataIndex: 'constructionNum', scopedSlots: { customRender: 'publicText' } },
      { title: '验收用料', align: "center", dataIndex: 'acceptanceNum', scopedSlots: { customRender: 'publicText' } },
      { title: '结算用料', align: "center", dataIndex: 'settlementNum', scopedSlots: { customRender: 'publicText' } },
      { title: '结算余料', align: "center", dataIndex: 'settlementRemainNum', scopedSlots: { customRender: 'settlementRemainNum' } },
      { title: '盘点余料', align: "center", dataIndex: 'inventoryRemainNum', scopedSlots: { customRender: 'publicText' } },
      { align: "center", dataIndex: 'inventoryProfitAndLossNum', slots: { title: 'inventoryProfitAndLossNum_title' }, scopedSlots: { customRender: 'inventoryProfitAndLossNum' } },
    ]);

    const renderMergedCells = (value, row, index, dataIndex) => {
      const obj = { children: value, attrs: {} };
      const dataSource = dataSource.value;
      if (dataIndex === 'projectCode') {
        if (index === 0 || row.projectCode_dictText !== dataSource[index - 1].projectCode_dictText) {
          let rowSpan = 1;
          for (let i = index + 1; i < dataSource.length; i++) {
            if (dataSource[i].projectCode_dictText === row.projectCode_dictText) {
              rowSpan++;
            } else {
              break;
            }
          }
          obj.attrs.rowSpan = rowSpan;
        } else {
          obj.attrs.rowSpan = 0;
        }
      } else if (dataIndex === 'orgCode_dictText') {
        if (index === 0 || row.orgCode_dictText !== dataSource[index - 1].orgCode_dictText || row.projectCode_dictText !== dataSource[index - 1].projectCode_dictText) {
          let rowSpan = 1;
          for (let i = index + 1; i < dataSource.length; i++) {
            if (dataSource[i].orgCode_dictText === row.orgCode_dictText && dataSource[i].projectCode_dictText === row.projectCode_dictText) {
              rowSpan++;
            } else {
              break;
            }
          }
          obj.attrs.rowSpan = rowSpan;
        } else {
          obj.attrs.rowSpan = 0;
        }
      } else {
        if (index === 0 || row.subProjectCode_dictText !== dataSource[index - 1].subProjectCode_dictText) {
          let rowSpan = 1;
          for (let i = index + 1; i < dataSource.length; i++) {
            if (dataSource[i].subProjectCode_dictText === row.subProjectCode_dictText) {
              rowSpan++;
            } else {
              break;
            }
          }
          obj.attrs.rowSpan = rowSpan;
        } else {
          obj.attrs.rowSpan = 0;
        }
      }
      return obj;
    };

    const materialInventoryResultChange = (val) => {
      queryParam.value.materialInventoryResult = val;
      forceUpdate();
    };

    const beforeSearchQuery = () => {
      searchQuery();
      departChange(queryParam.value.type);
    };

    const beforeSearchReset = () => {
      searchReset();
      departChange();
    };

    const deepClone = (input, hash = new WeakMap()) => {
      if (input === null || typeof input !== 'object') {
        return input;
      }
      if (hash.has(input)) {
        return hash.get(input);
      }
      let output = Array.isArray(input) ? [] : {};
      hash.set(input, output);
      if (Array.isArray(input)) {
        output = input.map(item => deepClone(item, hash));
      } else {
        for (let key in input) {
          if (input.hasOwnProperty(key)) {
            if (typeof input[key] === 'function') {
              output[key] = input[key].bind(output);
            } else {
              output[key] = deepClone(input[key], hash);
            }
          }
        }
      }
      return output;
    };

    const departChange = (val) => {
      if (val == 2) {
        nowFirst.value = 'orgCode_dictText';
        let objectArray = deepClone(originColums.value);
        let movedElement = objectArray.splice(3, 1)[0];
        objectArray.unshift(movedElement);
        columns.value = objectArray;
      } else {
        nowFirst.value = 'projectCode';
        columns.value = deepClone(originColums.value);
      }
      columnsKey.value += 1;
    };

    const subProjectCodeChange = (val, options) => {
      console.log('subProjectCodeChange', val, options, queryParam.value.subProjectName);
    };

    const projectCodeSearch = (value) => {
      getAction('/web/projectRecord/searchMainProject', { order: 'desc', pageNo: 1, pageSize: 100, keyword: value }).then(res => {
        const data = [];
        res.result.forEach(item => {
          data.push({ id: item.id, value: item.projectCode, text: item.projectName });
        });
        projectNameList.value = data;
      });
    };

    const projectCodeChange = (value) => {
      queryParam.value.projectName_Code = value;
      const obj = projectNameList.value.filter(item => item.id === value);
      if (obj.length > 0) {
        exportParams.value.projectName = obj[0].text;
        queryParam.value.projectName = obj[0].text;
      } else {
        exportParams.value.projectName = '';
        queryParam.value.projectName = '';
      }
    };

    const change = (val1, val2, val3) => {
      console.log('改变', val3);
      exportParams.value.dateTpye = val3 === 2 ? 1 : 2;
      queryParam.value.projectDateBegin = val1;
      queryParam.value.projectDateEnd = val2;
      queryParam.value.hiddenZeroTotalAmountFlag = checkFlag.value ? 1 : 0;
    };

    const handelChange = () => {
      configOrderSubTypeTemp.value = undefined;
      queryParam.value.configOrderSubType = undefined;
      queryParam.value.incomeExpenseType = '';
      getConfigOrderSubTypeList();
    };

    const getConfigOrderSubTypeList = () => {
      if (queryParam.value.configOrderMainType) {
        getAction('/web/bizTransactionOrder/getOrderSubType', { configOrderMainType: queryParam.value.configOrderMainType }).then(res => {
          if (res.code == 200) {
            switch (queryParam.value.configOrderMainType) {
              case '1':
                let arr = [];
                for (let i = 0; i < res.result.length; i++) {
                  arr.push(res.result.slice(i, i + 1));
                }
                arr.forEach(v => {
                  v.push({ value: v[0].value, label: v[0].label + '（退）' });
                });
                let result = [].concat.apply([], arr).filter(v => v.value != 96 && v.value != 98);
                configOrderSubTypeList.value = result;
                break;
              case '2':
                configOrderSubTypeList.value = res.result.filter(v => Number(v.value) <= 7 || Number(v.value) == 15 || Number(v.value) == 16 || Number(v.value) == 20 || Number(v.value) == 21);
                break;
              case '3':
                configOrderSubTypeList.value = res.result.filter(v => Number(v.value) !== 7 && Number(v.value) !== 8 && Number(v.value) !== 12 && Number(v.value) !== 14 && Number(v.value) !== 10 && Number(v.value) !== 16);
                break;
              default:
                configOrderSubTypeList.value = res.result;
                break;
            }
          }
        });
      } else {
        Vue.prototype.$message.warning('请选择业务类型！');
      }
    };

    const handleChange = (val) => {
      configOrderSubTypeList.value = [];
      queryParam.value.configOrderSubType = '';
      configOrderSubTypeTemp.value = undefined;
      queryParam.value.incomeExpenseType = '';
    };

    const handleConfigOrderSubTypeChange = (val) => {
      configOrderSubTypeTemp.value = val;
      if (queryParam.value.configOrderMainType == 1) {
        queryParam.value.incomeExpenseType = val.key.substr(val.key.length - 1, 1);
      } else {
        queryParam.value.incomeExpenseType = '';
      }
    };

    const handleOpen = (record) => {
    };

    const filterOption = (input, option) => {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };

    const searchQuery = () => {
      let val = configOrderSubTypeTemp.value;
      if (val) {
        if (queryParam.value.configOrderMainType == 1) {
          if (val.key.length == 2) {
            queryParam.value.configOrderSubType = val.key.substr(0, 1);
          } else {
            queryParam.value.configOrderSubType = val.key.substr(0, 2);
          }
        } else {
          queryParam.value.configOrderSubType = val.key;
        }
      }
      loadData(1);
    };

    const searchReset = () => {
      queryParam.value.type = '';
      queryParam.value.projectName = '';
      queryParam.value.subProjectName = '';
      queryParam.value.departId = '';
      queryParam.value.material = '';
      queryParam.value.producerId = '';
      queryParam.value.specification = '';
      queryParam.value.materialInventoryResult = '';
      loadData(1);
    };

    const onChangeOrgCode = () => {
      getAction('/sys/sysDepart/listAll').then(res => {
        if (res.success) {
          allDepartList.value = res.result.map(v => ({ text: v.departName, value: v.orgCode }));
        }
      });
    };

    const initColumnsCustom = (key) => {
      // 初始化列设置
    };

    const loadData = (pageNo) => {
      // 加载数据的方法
    };

    const handleExportXlsx = () => {
      // 导出Excel的方法
    };

    const handleTableChange = (pagination, filters, sorter) => {
      // 表格变化的方法
    };

    onMounted(() => {
      originColums.value = deepClone(columns.value);
      projectCodeSearch('');
      onChangeOrgCode();
      loadData(1);
      getAction('/web/bizWorkorder/getWorkorderProject