kd-aiot-frontend-qms/src/views/inspectionPlan/components/entrustedDialog.vue

<template>
  <el-dialog
    title="受托收货单"
    :visible.sync="entrustedVisible"
    :before-close="handleClose"
    :close-on-click-modal="true"
    :close-on-press-escape="false"
    append-to-body
    width="60%"
    @onDone="onDone"
  >
    <div>
      <el-row>
        <el-col :span="24" class="topsearch">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="产品名称:">
              <el-input
                clearable
                v-model="formInline.productName"
                placeholder="产品名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="产品编码:">
              <el-input
                clearable
                v-model="formInline.productCode"
                placeholder="产品编码"
              ></el-input>
            </el-form-item>
            <el-button
              type="primary"
              size="small"
              @click="reload"
              style="margin-top: 4px"
              >搜索</el-button
            >
            <el-button style="margin-top: 4px" size="small" @click="reset"
              >重置</el-button
            >
          </el-form>
        </el-col>
        <el-col :span="24" class="table_col">
          <ele-pro-table
            ref="equiTable"
            :columns="columns"
            :datasource="datasource"
            :selection.sync="selection"
            cache-key="systemRoleTable3"
            row-key="id"
            height="50vh"
          >
          </ele-pro-table>
        </el-col>
      </el-row>
    </div>
    <div class="btns">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  const reviewStatus = {
    0: '未提交',
    1: '审核中',
    2: '已审核',
    3: '审核不通过',
    7: '作废'
  };
  //   import AssetTree from '@/components/AssetTree/index.vue';
  import { entrustedList } from '@/api/classifyManage';
  export default {
    // components: {
    //   AssetTree
    // },
    props: {
      selectList: Array,
      type: {
        default: 2 //1多选 2单选
      },
      isAll: {
        default: false
      },
      entrustedVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'orderNo',
            label: '销售订单编码',
            align: 'center',
            slot: 'orderNo',
            showOverflowTooltip: true,
            sortable: true,
            minWidth: 200
          },
          {
            prop: 'productName',
            label: '产品名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'productCode',
            label: '产品编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 190
          },
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'totalCount',
            label: '订单总数量',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },

          {
            prop: 'produceType',
            label: '生产类型',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'productBrand',
            label: '产品牌号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 170
          }
        ],
        tableList: [],
        selection: [],
        formInline: {
          productCode: '',
          productName: ''
        }
      };
    },

    watch: {},
    mounted() {
      console.log(this.entrustedVisible, '12345');
      // this.entrustedVisible = true;
    },
    methods: {
      async datasource({ page, limit }) {
        const params = {
          pageNum: page,
          size: limit,
          ...this.formInline
        };
        const data = await entrustedList(params);
        console.log(data, 'data');
        this.tableList = data.list;
        return data;
      },
      //   open(ids) {
      //     this.entrustedVisible = true;
      //     if (ids) {
      //       this.ids = ids;
      //     }
      //   },
      reload() {
        this.$refs.equiTable.reload();
      },
      handleClose() {
        // this.entrustedVisible = false;
        this.formInline = {
          productCode: '',
          productName: ''
        };
        this.$emit('closeEntrusted');
        // this.$refs.equiTable.clearSelection();
      },
      reset() {
        this.formInline = {
          productCode: '',
          productName: ''
        };
        this.reload();
      },
      onDone() {
        this.$nextTick(() => {
          this.$refs.equiTable.setSelectedRowKeys(this.ids);
        });
      },
      // 选择
      selected() {
        if (this.selection.length == 0) {
          return this.$message.warning('请选择一条数据');
        }
        if (this.selection.length > 1 && this.type == 2) {
          return this.$message.warning('只能选择一条数据');
        }
        this.formInline = {
          productCode: '',
          productName: ''
        };

        this.$emit('choose', this.selection[0]);
        this.handleClose();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tree_col {
    border: 1px solid #eee;
    padding: 10px 0;
    box-sizing: border-box;
    max-height: 530px;
    overflow: auto;
  }
  .table_col {
    padding-left: 10px;
    ::v-deep .el-table th.el-table__cell {
      background: #f2f2f2;
    }
  }
  .pagination {
    text-align: right;
    padding: 10px 0;
  }
  .btns {
    text-align: right;
    padding: 10px 0;
  }
  .topsearch {
    margin-bottom: 15px;
  }
</style>