表格组件调整

zouyu

2025-03-12 8a756a7a4cac8714e7e2515e9fd464749dbab5be

表格组件调整

 src/components/Table/lims-table.vue

@@ -4,6 +4,8 @@
    <el-table
      ref="multipleTable"
      v-loading="tableLoading"
      element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading"
      :border="border"
      :data="tableData"
      :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
@@ -43,7 +45,6 @@
        :filter-multiple="item.filterMultiple"
        :filtered-value="item.filteredValue"
        :filters="item.filters"
        :fixed="item.fixed"
        :label="item.label"
        :min-width="item.minWidth"
        :prop="item.prop"
@@ -132,23 +133,63 @@
              >{{ scope.row[item.prop] | formatters(item.formatData) }}</el-tag
            >
          </div>

          <!-- 按钮 -->
          <div v-else-if="item.dataType == 'action'">
            <template v-for="(o, key) in item.operation">
              <el-button
                v-show="o.type != 'upload'"
                size="mini"
                v-if="o.showHide ? o.showHide(scope.row) : true"
                :disabled="o.disabled ? o.disabled(scope.row) : false"
                :icon="iconFn(o)"
                :plain="o.plain"
                :style="{ color: o.name === '删除' ? '#f56c6c' : o.color }"
                :type="o.type | typeFn(scope.row)"
                @click="o.clickFun(scope.row)"
                :key="key"
          <!-- 可点击的文字 -->
          <div
            v-else-if="item.dataType == 'link'"
            class="cell"
            style="width: 100%"
            @click="goLink(scope.row, item.linkEvent)"
              >
                {{ o.name }}
            <span class="link" v-if="!item.formatData">
              {{ scope.row[item.prop] }}
            </span>
          </div>
          <!-- 默认纯展示数据 -->
          <div v-else class="cell" style="width: 100%">
            <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
            <span v-else>{{
              scope.row[item.prop] | formatters(item.formatData)
            }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column
        v-if="table.operator"
        :label="(table.operatorConfig && table.operatorConfig.label) || '操作'"
        :width="
          table.operatorConfig &&
          (table.operatorConfig.width
            ? table.operatorConfig.width
            : calcOperationWidth())
        "
        :min-width="
          (table.operatorConfig && table.operatorConfig.width) ||
          table.operatorConfig.minWidth ||
          100
        "
        align="center"
        :fixed="table.operatorConfig ? table.operatorConfig.fixed : 'right'"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <template v-for="(o, index) in table.operator">
            <el-button
              :key="index"
              v-if="o.type != 'upload'"
              @click.stop="o.clickFun(scope.row)"
              :type="o.type || 'text'"
              :icon="o.icon"
              :size="o.size || 'small'"
              :disabled="o.disabled ? o.disabled(scope.row) : false"
              v-show="o.showFun ? o.showFun(scope.row) : true"
              :class="[
                'commonButton',
                {
                  del: o.name === '删除' || o.name === '作废',
                },
              ]"
              >{{ o.name }}
              </el-button>
              <el-upload
                :action="
@@ -175,7 +216,7 @@
                :on-exceed="onExceed"
                :on-success="handleSuccessUp"
                :show-file-list="false"
                :key="key"
              :key="index"
              >
                <el-button
                  :size="o.size ? o.size : 'small'"
@@ -203,7 +244,7 @@
                :auto-upload="false"
                :on-exceed="onExceed"
                :show-file-list="false"
                :key="key"
              :key="index"
              >
                <el-button
                  :size="o.size ? o.size : 'small'"
@@ -213,25 +254,6 @@
                >
              </el-upload>
            </template>
          </div>
          <!-- 可点击的文字 -->
          <div
            v-else-if="item.dataType == 'link'"
            class="cell"
            style="width: 100%"
            @click="goLink(scope.row, item.linkEvent)"
          >
            <span class="link" v-if="!item.formatData">
              {{ scope.row[item.prop] }}
            </span>
          </div>
          <!-- 默认纯展示数据 -->
          <div v-else class="cell" style="width: 100%">
            <span v-if="!item.formatData">{{ scope.row[item.prop] }}</span>
            <span v-else>{{
              scope.row[item.prop] | formatters(item.formatData)
            }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
@@ -366,11 +388,18 @@
        return {};
      },
    },
    column: {
      type: Array,
    // column: {
    //   type: Array,
    //   default() {
    //     return [];
    //   },
    // },
    table: {
      type: Object,
      default() {
        return [];
        return {};
      },
      required: true,
    },
    rowClassName: {
      type: Function,
@@ -405,12 +434,32 @@
  data() {
    return {
      spanList: [],
      column: [],
    };
  },
  watch: {
    table(val) {
      this.doLayout();
    },
  },
  mounted() {
    this.calculateSpanInfo();
    this.column = this.table.column;
  },
  methods: {
    //计算操作列的宽度
    calcOperationWidth() {
      let width = 0;
      this.table.operator.forEach((item) => {
        width += item.name.length * 15 + 15;
      });
      return width;
    },
    doLayout() {
      this.$nextTick(() => {
        this.$refs.multipleTable && this.$refs.multipleTable.doLayout();
      });
    },
    getWidth(row) {
      let count = 0;
      row.forEach((a) => {

 src/views/business/inspectionOrder/index.vue

@@ -183,7 +183,7 @@
            :height="tableHeight + ''"
            @pagination="pagination"
            :handleSelectionChange="selectionChange"
            :column="column"
            :table="table"
            :page="page"
            :tableLoading="tableLoading"
          ></lims-table>
@@ -376,9 +376,9 @@
        >
          <lims-table
            highlightCurrentRow
            :heigt="'80vh'"
            :height="'80vh'"
            :tableData="dataLooktableData"
            :column="dataLookcolumn"
            :table="dataLookTable"
            :tableLoading="dataLookTableLoading"
          ></lims-table>
        </el-dialog>
@@ -868,6 +868,8 @@
        current: 1,
      },
      tableLoading: false,
      table: {
        // 标题
      column: [
        {
          label: "委托编号",
@@ -997,20 +999,24 @@
          minWidth: "120px",
          width: "120px",
        },
        {
          dataType: "action",
        ],
        operatorConfig: {
          fixed: "right",
          label: "操作",
          operation: [
          minWidth: 100,
        },
        operator: [
            {
              name: "数据查看",
              type: "text",
              clickFun: (row) => {},
              disabled: (row) => {
                return row.state != 1 && row.state != 4;
              },
              clickFun: (row) => {
                this.handleDataLook(row);
            },
            showFun: () => {
              return true;
              },
            },
            {
@@ -1064,9 +1070,8 @@
            },
          ],
        },
      ],
      dataLookTableLoading: false,
      dataLookcolumn: [
      dataLookTable: {
        column: [
        {
          label: "委托编号",
          prop: "entrustCode",
@@ -1082,20 +1087,20 @@
        {
          label: "管套色标",
          prop: "bushColor",
          minWidth: "160px",
          width: "160px",
            minWidth: "100px",
            width: "100px",
        },
        {
          label: "光纤带编号",
          prop: "code",
          minWidth: "160px",
          width: "160px",
            minWidth: "120px",
            width: "120px",
        },
        {
          label: "光纤色标",
          prop: "color",
          minWidth: "160px",
          width: "160px",
            minWidth: "100px",
            width: "100px",
        },
        {
          label: "检验项",
@@ -1122,21 +1127,21 @@
          width: "100px",
          dataType: "tag",
          formatData: (params) => {
            let index = this.urgencyDictList.findIndex(
              (item) => item.dictValue == params
              let index = this.insResultList.findIndex(
                (item) => item.value == params
            );
            if (index > -1) {
              return this.urgencyDictList[index].dictLabel;
                return this.insResultList[index].label;
            } else {
              return null;
            }
          },
          formatType: (params) => {
            let index = this.urgencyDictList.findIndex(
              (item) => item.dictValue == params
              let index = this.insResultList.findIndex(
                (item) => item.value == params
            );
            if (index > -1) {
              return this.urgencyDictList[index].listClass;
                return this.insResultList[index].type;
            } else {
              return null;
            }
@@ -1163,8 +1168,8 @@
        {
          label: "检验日期",
          prop: "checkTime",
          minWidth: "120px",
          width: "120px",
            minWidth: "140px",
            width: "140px",
        },
        {
          label: "样品名称",
@@ -1184,16 +1189,19 @@
          minWidth: "120px",
          width: "120px",
        },
        {
          dataType: "action",
        ],
        operatorConfig: {
          fixed: "right",
          label: "操作",
          operation: [
          width: 80,
          minWidth: 100,
        },
        operator: [
            {
              name: "查看",
              type: "text",
              clickFun: (row) => {},
              showHide: (row) => {
            showFun: (row) => {
                console.log(row);
                console.log(row.inspectionItem);
                return (
@@ -1211,8 +1219,56 @@
            },
          ],
        },
      ],
      dataLookTableLoading: false,
      dataLooktableData: [],
      qrData: [],
      multipleSelection: [],
      sonLaboratoryList: [],
      urgencyDictList: [],
      tableHeight: 0,
      tabList: [
        {
          label: "待审核",
          value: 0,
        },
        {
          label: "待检验",
          value: 1,
        },
        {
          label: "已检验",
          value: 4,
        },
        {
          label: "退回",
          value: 2,
        },
        {
          label: "撤销",
          value: 3,
        },
      ],
      insResultList: [
        {
          value: 1,
          label: "合格",
          type: "success",
        },
        {
          value: 0,
          label: "不合格",
          type: "danger",
        },
        {
          value: 3,
          label: "不判定",
          type: "",
        },
      ],
      tabIndex: 0,
      active: 0, //1：下单，2：查看，3：审核，4：光纤配置,默认为0
      currentId: null,
      more: false,

      //old
      tableHeader: [],
@@ -1255,292 +1311,11 @@
      // 人员列表
      personList: [],
      currentTableData: [],
      // componentData: {
      //   entity: {
      //     entrustCode: null,
      //     sample: null,
      //     sampleName: null,
      //     sampleModel: null,
      //     sampleCode: null,
      //     outEntrustCode: null,
      //     state: 0,
      //     name: null,
      //     engineering: null,
      //     production: null,
      //     startAndEndTime: [],
      //     // orderBy: {
      //     //     field: '',
      //     //     order: ''
      //     // }
      //   },
      //   isIndex: true,
      //   showSelect: true,
      //   select: true,
      //   selectMethod: "selectMethod",
      //   do: [
      //     {
      //       id: "dataLook",
      //       font: "数据查看",
      //       type: "text",
      //       method: "handleDataLook",
      //       disabFun: (row, index) => {
      //         return row.state != 1 && row.state != 4;
      //       },
      //     },
      //     {
      //       id: "download",
      //       font: "报告下载",
      //       type: "text",
      //       method: "download",
      //       disabFun: (row, index) => {
      //         return row.state != 4 || row.isRatify != 1;
      //       },
      //     },
      //     {
      //       id: "verify",
      //       font: "审核",
      //       type: "text",
      //       method: "handleVerify",
      //       disabFun: (row, index) => {
      //         return row.state != 0;
      //       },
      //     },
      //     {
      //       id: "quash",
      //       font: "撤销",
      //       type: "text",
      //       method: "handlEquash",
      //       disabFun: (row, index) => {
      //         return row.state != 1 && row.state != 0;
      //       },
      //     },
      //     {
      //       id: "quashCheck",
      //       font: "撤销审核",
      //       type: "text",
      //       method: "handlEquashCheck",
      //       disabFun: (row, index) => {
      //         return (
      //           (row.state != 1 && row.state != 0) ||
      //           this.tabIndex != 1 ||
      //           row.isRevocation != 1
      //         );
      //       },
      //     },
      //     {
      //       font: "分配",
      //       type: "text",
      //       method: "handleIssued",
      //       disabFun: (row, index) => {
      //         return (
      //           row.state != 1 ||
      //           (row.entrustCode != null &&
      //             Number(row.assign) > 0 &&
      //             row.inspectId != null)
      //         );
      //       },
      //     },
      //   ],
      //   linkEvent: {
      //     sampleName: {
      //       method: "selectAllByOne",
      //     },
      //   },
      //   tagField: {
      //     type: {
      //       select: [],
      //     },
      //     createUser: {
      //       select: [],
      //     },
      //     orderType: {
      //       select: [],
      //     },
      //     processing: {
      //       select: [
      //         {
      //           value: 1,
      //           label: "实验室处理",
      //         },
      //         {
      //           value: 0,
      //           label: "委托单位取回",
      //         },
      //       ],
      //     },
      //     isLeave: {
      //       select: [
      //         {
      //           value: 1,
      //           label: "留样",
      //         },
      //         {
      //           value: 0,
      //           label: "不留样",
      //         },
      //       ],
      //     },
      //     send: {
      //       select: [
      //         {
      //           value: 1,
      //           label: "自取",
      //         },
      //         {
      //           value: 0,
      //           label: "其他",
      //         },
      //       ],
      //     },
      //   },
      //   selectField: {},
      //   requiredAdd: [],
      //   requiredUp: [],
      //   needSort: ["createTime", "sendTime", "type", "appointed"],
      // },
      orderId: "",
      revocationInsProductIds: "",
      // componentDataDataLook: {
      //   isPage: false,
      //   entity: {
      //     id: 0,
      //     orderBy: {
      //       field: "sampleCode",
      //       order: "asc",
      //     },
      //   },
      //   isIndex: false,
      //   showSelect: false,
      //   select: false,
      //   do: [
      //     {
      //       id: "",
      //       font: "查看",
      //       type: "text",
      //       method: "viewDetails",
      //       showFun: (row, index) => {
      //         return (
      //           row.inspectionItem == "单根垂直燃烧" ||
      //           row.inspectionItem.includes("松套管") ||
      //           row.inspectionItemSubclass.includes("松套管") ||
      //           (row.inspectionItem == "抗拉强度" &&
      //             (row.inspectionItemSubclass == "热老化处理前" ||
      //               row.inspectionItemSubclass == "热老化处理后")) ||
      //           (row.inspectionItem == "断裂伸长率" &&
      //             (row.inspectionItemSubclass == "热老化处理前" ||
      //               row.inspectionItemSubclass == "热老化处理后"))
      //         );
      //       },
      //     },
      //   ],
      //   tagField: {
      //     insState: {
      //       select: [],
      //     },
      //     insResult: {
      //       select: [
      //         {
      //           value: 1,
      //           label: "合格",
      //           type: "success",
      //         },
      //         {
      //           value: 0,
      //           label: "不合格",
      //           type: "danger",
      //         },
      //         {
      //           value: 3,
      //           label: "不判定",
      //           type: "",
      //         },
      //       ],
      //     },
      //   },
      //   selectField: {},
      //   spanConfig: {
      //     rows: [
      //       // {
      //       //   name: "entrustCode",
      //       //   index: 0,
      //       // },
      //       // {
      //       //   name: "sampleCode",
      //       //   index: 1,
      //       // },
      //     ],
      //   },
      //   requiredAdd: [],
      //   requiredUp: [],
      // },
      // componentDataDelete: {
      //   entity: {
      //     // orderId: '',
      //     // orderBy: {
      //     //     field: 'sampleCode',
      //     //     order: 'asc'
      //     // }
      //   },
      //   isPage: false,
      //   isIndex: false,
      //   showSelect: true,
      //   select: true,
      //   selectMethod: "selectDelete",
      //   do: [],
      //   tagField: {
      //     insState: {
      //       select: [],
      //     },
      //     insResult: {
      //       select: [
      //         {
      //           value: 1,
      //           label: "合格",
      //           type: "success",
      //         },
      //         {
      //           value: 0,
      //           label: "不合格",
      //           type: "danger",
      //         },
      //       ],
      //     },
      //   },
      //   selectField: {},
      //   spanConfig: {},
      //   requiredAdd: [],
      //   requiredUp: [],
      // },
      deleteDialogVisible: false,
      entityCopy: {},
      upIndex: 0,
      upLoad: false,
      tabList: [
        {
          label: "待审核",
          value: 0,
        },
        {
          label: "待检验",
          value: 1,
        },
        {
          label: "已检验",
          value: 4,
        },
        {
          label: "退回",
          value: 2,
        },
        {
          label: "撤销",
          value: 3,
        },
      ],
      tabIndex: 0,
      active: 0, //1：下单，2：查看，3：审核，4：光纤配置,默认为0
      currentId: null,
      more: false,

      insOrderRow: {},
      checkIndexList: [],
      checkDataList: [
@@ -1548,12 +1323,6 @@
          sampleCode: "",
        },
      ],
      qrData: [],
      multipleSelection: [],
      sonLaboratoryList: [],
      queryCount: 0,
      urgencyDictList: [],
      tableHeight: 0,
    };
  },
  created() {
@@ -1820,32 +1589,8 @@
      this.getLabelPrinting(selection);
      this.printDialogVisible = true;
    },
    // 选择检验分配人员
    getAuthorizedPerson() {
      this.$axios.get(this.$api.user.getLaboratoryPersonList).then((res) => {
        // let data = [];
        // res.data.forEach((a) => {
        //   data.push({
        //     label: a.name,
        //     value: a.id,
        //   });
        // });
        this.personList = res.data;
      });
    },
    refreshTable() {
      this.getList();
    },
    getTableData(newData) {
      if (newData && newData.length == 1) {
        const insState = newData[0].state;
        this.tabList.forEach((ele, index) => {
          if (ele.value == insState && this.queryCount == 0) {
            this.handleTab(ele, index);
            this.queryCount = 1;
          }
        });
      }
    },
    refresh() {
      this.queryParams = {