kd-aiot-frontend-qms/src/views/inspectionWork/components/toolList.vue

<template>
    <ele-modal width="60%" :visible.sync="visible" :close-on-click-modal="false" custom-class="ele-dialog-form"
        append-to-body :maxable="true" :resizable="true">

        <!-- <div class="ele-body" style="height:60vh;overflow: auto;"> -->
        <!-- <el-card shadow="never" v-loading="loading"> -->
        <!-- <ele-split-layout
        width="210px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
          <div class="ele-border-lighter sys-organization-list">
            <el-tree
              ref="tree"
              :data="data"
              highlight-current
              :draggable="true"
              node-key="id"
              :expand-on-click-node="false"
              :default-expand-all="true"
              @node-click="onNodeClick"
            >
            </el-tree>
          </div> -->
        <!-- <template v-slot:content> -->
        <ele-pro-table ref="table" :columns="columns" :datasource="useList" tool-class="ele-toolbar-form"
            :needPage="false" row-key="id" :selection.sync="selection" >
            <template v-slot:toolbar v-if="type != 'detail'">
                <el-button type="primary" @click="fileShow = true">选择质检工具</el-button>
            </template>
            <template v-slot:action="{ row }">
            <el-popconfirm
            class="ele-action"
            title="确定要删除吗？"
            @confirm="remove(row)"
            >
            <template v-slot:reference v-if="type != 'detail'">
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
                </el-link>
            </template>
            </el-popconfirm>
      </template>
        </ele-pro-table>
        <!-- </template> -->
        <!-- </ele-split-layout> -->
        <!-- </el-card> -->

        <!-- </div> -->
        <template v-slot:footer>
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="addUserToolList"> 确认 </el-button>
        </template>


        <ele-modal width="60%" :visible.sync="fileShow" :close-on-click-modal="false" custom-class="ele-dialog-form"
            append-to-body :maxable="true" :resizable="true">
            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" tool-class="ele-toolbar-form"
            height="500px"
                :needPage="false" row-key="id" :selection.sync="selection" :toolbar="false">
            </ele-pro-table>
            <template v-slot:footer>
                <el-button @click="fileShow = false">取消</el-button>
                <el-button type="primary" @click="addTemplate"> 确认 </el-button>
            </template>
        </ele-modal>
    </ele-modal>
</template>

<script>
export default {
    data() {
        return {
            selection: [],
            loading: false,
            fileShow: false,
            visible: false,
            datasource: [],
            useList: [],
            columns: [
                {
                    width: 45,
                    type: 'selection',
                    columnKey: 'selection',
                    align: 'center'
                },
                {
                    columnKey: 'index',
                    type: 'index',
                    width: 50,
                    align: 'center',
                    label: '序号',
                    showOverflowTooltip: true,
                    fixed: 'left'
                },
                {
                    prop: 'code',
                    label: '物品编码',
                    align: 'center',
                    showOverflowTooltip: true
                },
                {
                    slot: 'name',
                    prop: 'name',
                    label: '物品名称',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 200
                },
                {
                    prop: 'brandNum',
                    label: '牌号',
                    align: 'center',
                    showOverflowTooltip: true
                },
                {
                    prop: 'categoryModel',
                    label: '型号',
                    align: 'center',
                    showOverflowTooltip: true
                },
                {
                    prop: 'specification',
                    label: '规格',
                    align: 'center',
                    showOverflowTooltip: true
                },
                {
                    columnKey: 'action',
                    label: '操作',
                    width: 200,
                    align: 'center',
                    resizable: false,
                    slot: 'action',
                    showOverflowTooltip: true
                }
                // {
                //     prop: 'measureQuantity',
                //     label: '计量数量',
                //     sortable: 'custom',
                //     showOverflowTooltip: true,
                //     width: 130,
                //     align: 'center'
                // },
                // {
                //     prop: 'measureUnit',
                //     label: '计量单位',
                //     align: 'center'
                // },
                // {
                //     prop: 'weight',
                //     label: '重量',
                //     showOverflowTooltip: true
                // },
                // {
                //     prop: 'weightUnit',
                //     label: '重量单位',
                //     showOverflowTooltip: true
                // },
            ],
            data: [],
            type:''
        }
    },
    methods: {
        open(val, type, sList) {
            this.visible = true;
            this.type = type;
            this.useList = val;
            this.datasource = sList;
        },
        addUserToolList() {
            // if (this.selection.some((item) => 
            //     this.useList.some((i) => i.code == item.code))) {
            //     return this.$message.error('选择的物品已经存在列表了');
            // }
            
            this.$emit(
                'success',
                this.useList
            );
            this.visible = false;
            this.init();
        },
        addTemplate() {
            this.useList = this.selection;
            this.fileShow = false;
        },
        remove(row) {
            this.useList = this.useList.filter((item) => item.code != row.code);
        },
        init() {
            this.selection = [];
        }
    },
}
</script>