cqdevicemgt/sgzb-ui/src/views/warehouseManage/newPurchase/toolsAcceptance/component/codingTools.vue

<template>
    <div id="newDevicesCode">
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="80px"
        >
            <el-form-item label="关键字" prop="keyWord">
                <el-input
                    v-model="queryParams.keyWord"
                    placeholder="请输入关键字"
                    clearable
                    maxlength="50"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <!-- <el-row :gutter="10" class="mb8">
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            ></right-toolbar>
        </el-row> -->

        <el-table
            v-loading="loading"
            :data="typeList"
            @selection-change="handleSelectionChange"
        >
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column
                label="机具类型名称"
                align="center"
                prop="typeName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="规格型号"
                align="center"
                prop="specificationType"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="采购时间"
                align="center"
                prop="purchaseTime"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="采购数量"
                align="center"
                prop="purchaseNum"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="验收数量"
                align="center"
                prop="checkNum"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="绑定数量"
                align="center"
                prop="bindNum"
                :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.bindNum > 0">{{
                        scope.row.bindNum
                    }}</span>
                    <span v-else>0</span>
                </template>
            </el-table-column>
            <el-table-column
                label="是否为固定资产"
                align="center"
                prop="fixCode"
                :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.fixCode == '0'">是</span>
                    <span v-if="scope.row.fixCode == '1'">否</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="编码类型" align="center" prop="codeType" :show-overflow-tooltip="true" />
      <el-table-column label="二维码" align="center" prop="dictName" :show-overflow-tooltip="true" />-->
            <el-table-column
                label="状态"
                align="center"
                prop="status"
                width="180"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">待入库</span>
                    <span v-if="scope.row.status == 1">已入库</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        icon="el-icon-view"
                        :disabled="scope.row.bindNum == 0"
                        @click="handleBindDetails(scope.row)"
                    >
                        查看
                    </el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        v-if="scope.row.bindNum < scope.row.checkNum"
                        @click="handleCode(scope.row)"
                    >
                        绑定编码
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 
    <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
    />-->

        <!-- 添加或修改参数配置对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            v-if="open"
            width="1000px"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form
                ref="formCodeRef"
                :model="form"
                :rules="codeRules"
                :inline="true"
                label-width="78px"
                v-if="!isDetail"
            >
                <el-input v-model="form.typeId" disabled v-show="false" />

                <el-form-item label="编码前缀" prop="exCode">
                    <el-input v-model="form.exCode" @change="fillingCodeList" />
                </el-form-item>

                <el-form-item label="后缀范围" prop="suffixOneCode">
                    <el-input
                        v-model="form.suffixOneCode"
                        placeholder="0001"
                        maxlength="4"
                        style="width: 100px"
                    />
                </el-form-item>

                <el-form-item prop="suffixTwoCode">
                    <el-input
                        v-model="form.suffixTwoCode"
                        placeholder="0005"
                        maxlength="4"
                        style="width: 100px"
                    />
                </el-form-item>
                <el-form-item label="固定资产" prop="fixCode">
                    <el-select
                        v-model="form.fixCode"
                        placeholder="是否为固定资产"
                        clearable
                        allow-create
                        style="width: 100px"
                    >
                        <el-option label="是" value="0" />
                        <el-option label="否" value="1" />
                    </el-select>
                </el-form-item>
                <!-- <el-col :span="2">
            <el-button
              type="primary"
              plain
              size="mini" 
              @click="createCodeList"
            >生成</el-button>
          </el-col>-->
                <el-form-item>
                    <el-button
                        type="primary"
                        plain
                        size="mini"
                        @click="fillingCodeList"
                        >填充</el-button
                    >
                </el-form-item>
            </el-form>

            <el-row class="surplus-code">
                剩余待编码数量：<span style="color: red">{{
                    surplusNoBindNum
                }}</span>
            </el-row>
            <el-table v-loading="loading" :data="codeList" height="400">
                <!-- <el-table-column type="selection" width="50" align="center" /> -->
                <el-table-column label="序号" align="center" type="index" />
                <el-table-column
                    label="机具种类"
                    align="center"
                    prop="typeName"
                    :show-overflow-tooltip="true"
                    width="120"
                />
                <el-table-column
                    label="规格型号"
                    align="center"
                    prop="specificationType"
                    :show-overflow-tooltip="true"
                    width="120"
                />
                <el-table-column
                    label="设备编码"
                    align="center"
                    prop="maCode"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <el-input
                            :ref="`inputRef-${scope.row.id}`"
                            v-if="!isDetail"
                            v-model="scope.row.maCode"
                            :disabled="scope.row.statusFlag == 0"
                            οninput="value=value.replace(/[^0-9.]/g,'')"
                            maxlength="24"
                        ></el-input>
                        <span v-else>{{ scope.row.maCode }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="固定资产编码"
                    align="center"
                    prop="assetsCode"
                >
                    <template slot-scope="scope">
                        <el-input
                            v-model="scope.row.assetsCode"
                            v-if="!isDetail"
                            v-show="form.fixCode == '0'"
                            maxlength="50"
                        ></el-input>
                        <span v-else>{{ scope.row.assetsCode }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    width="160"
                    class-name="small-padding fixed-width"
                    v-if="!isDetail"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="delCode(scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button
                    type="primary"
                    @click="submitForm"
                    v-if="!isDetail"
                    :loading="codingLoading"
                    >确 定</el-button
                >
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    listType,
    getType,
    delType,
    addType,
    updateType,
    refreshCache,
} from '@/api/system/dict/type'
import {
    getPurchaseCheckInfo,
    listPurchaseMacodeInfo,
    addPurchaseMacode,
    updateMacode,
    delMacode,
    getMacodeInfo,
} from '@/api/store/newBuy'
import {
    getMacodeList,
    getMacodeDetailList,
    makeEquipmentNumber,
    editPurchaseMacode,
    delMacodeList,
    getBindCodeDetails,
} from '@/api/store/newBuy'

import { getTypeList } from '@/api/store/warehousing'
import { getListByMaType } from '@/api/store/tools'
import { number } from 'echarts'

export default {
    name: 'NewDevicesCode',
    dicts: ['sys_normal_disable'],
    props: {
        codingTaskId: {
            type: [String, Number],
        },
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            typeList: [],
            modelList: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            taskId: '',
            // 表格数据
            typeList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                // pageNum: 1,
                // pageSize: 10,
                typeName: undefined,
            },
            // 表单参数
            form: {
                exCode: '',
                str: '',
                str1: '',
                fixCode: '1',
                typeId: '',

                suffixOneCode: 0,
                suffixTwoCode: 0,
            },
            codeList: [], //弹窗列表list
            getCodeList: [], //已成过的编码list
            newCodeList: [], //新的编码list
            // 表单校验
            rules: {
                // typeId: [
                //   { required: true, message: "机具类型名称不能为空", trigger: "blur" }
                // ],
                // modelId: [
                //   { required: true, message: "规格型号不能为空", trigger: "blur" }
                // ],
                // maCode: [
                //   { required: true, message: "设备编号不能为空", trigger: "blur" }
                // ],
            },

            codeRules: {
                suffixOneCode: [
                    {
                        required: true,
                        message: '请输入后缀范围',
                        trigger: 'blur',
                    },
                    // {
                    //     pattern: /^[1-9]\d*$/,
                    //     message: '请输入正整数',
                    //     trigger: 'blur',
                    // },
                ],
                suffixTwoCode: [
                    {
                        required: true,
                        message: '请输入后缀范围',
                        trigger: 'blur',
                    },
                    // {
                    //     pattern: /^[1-9]\d*$/,
                    //     message: '请输入正整数',
                    //     trigger: 'blur',
                    // },
                ],
            },
            isDetail: false,

            surplusNoBindNum: 0,
            codingLoading: false,
        }
    },
    mounted() {
        // const taskId = this.$route.query && this.$route.query.taskId
        // this.taskId = taskId
        this.taskId = this.codingTaskId
        // console.log(this.taskId)
        this.getList()
    },
    methods: {
        //获取类型数据
        getTypeList() {
            getTypeList({ level: '3' }).then((response) => {
                this.typeList = response.data
            })
        },
        selectType(id) {
            getListByMaType({ typeId: id }).then((response) => {
                this.modelList = response.data
            })
        },
        /** 查询列表 */
        async getList() {
            this.loading = true
            this.queryParams.taskId = this.taskId
            const { data: res } = await getMacodeList(this.queryParams)
            this.typeList = res
            this.loading = false
        },
        // 取消按钮
        cancel() {
            this.reset()
            this.open = false
        },
        // 表单重置
        reset() {
            this.form = {
                str: undefined,
                str1: undefined,
                fixCode: '1',
            }
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = []
            this.resetForm('queryForm')
            this.handleQuery()
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = '添加'
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.maId)
            this.single = selection.length != 1
            this.multiple = !selection.length
        }, //getCodeList newCodeList
        /** 编码按钮操作 */ handleCode(row) {
            console.log(row)
            this.reset()
            this.form = row

            if (!this.form.fixCode) {
                this.form.fixCode = '1'
            }
            this.$set(this.form, 'str', '')
            this.$set(this.form, 'str1', '')
            // this.$set(this.form,'fixCode','1')
            let arr = this.form.arrivalTime.split('-')
            // this.form.exCode = ;
            // this.form.typeCode=111
            if (!this.form.typeCode) {
                this.form.typeCode = ''
            }
            if (!this.form.specsCode) {
                this.form.specsCode = ''
            }
            this.$set(
                this.form,
                'exCode',
                'NSJJ' +
                    this.form.typeCode +
                    this.form.specsCode +
                    arr[0][2] +
                    arr[0][3] +
                    arr[1],
            )

            this.form.count = row.checkNum
            this.codeList = []
            this.open = true
            this.title = '生成编码'
            this.isDetail = false
            // let param = {
            //   taskId:this.taskId,
            //   typeId:row.typeId,
            // }
            // getMacodeDetailList(param).then(response => {
            //   this.codeList = response.data;

            // });

            this.surplusNoBindNum =
                parseInt(this.form.checkNum) - parseInt(this.form.bindNum)
        },
        //生成列表codeList
        createCodeList() {
            // if(this.codeList.length>=this.form.checkNum){
            //   this.$modal.msgError("生成编码数量不可超过采购验收数量！！！");
            // }else{
            //   for(let i = 0; i < this.form.count; i++) {
            //       let obj = {
            //         typeName:this.form.typeName,
            //         specificationType:this.form.specificationType,
            //         typeId: this.form.typeId,
            //         taskId: this.form.taskId,
            //         assetsCode:'',
            //         fixCode:this.form.fixCode,
            //       }
            //       this.newCodeList.push(obj)
            //   }
            //   console.log(this.newCodeList,'this.newCodeList')
            //   this.codeList = this.getCodeList.concat(this.newCodeList)
            // }
        },
        //填充按钮
        fillingCodeList() {
            // console.log(Number(this.form.str))
            // this.codeList = []
            // let num = Number(this.form.str)
            // // console.log(Number(this.form.str1))
            // let num1 = Number(this.form.str1)
            // let count = num1 - num + 1 //生成数量
            // console.log()
            // let sum = count + this.form.bindNum
            // console.log(sum)
            if (this.codeList.length === this.surplusNoBindNum) {
                this.$modal.msgError('当前编码已填充，不可重复操作！')
                return
            }

            this.$refs['formCodeRef'].validate((valid) => {
                if (valid) {
                    if (
                        isNaN(this.form.suffixOneCode) ||
                        isNaN(this.form.suffixTwoCode) ||
                        parseInt(this.form.suffixOneCode) >
                            parseInt(this.form.suffixTwoCode)
                    ) {
                        this.$modal.msgError('编码后缀范围输入格式不正确')
                        return
                    }
                    let suffixOneCode = parseInt(this.form.suffixOneCode)
                    let suffixTwoCode = parseInt(this.form.suffixTwoCode)
                    let sumNum = suffixTwoCode - suffixOneCode + 1

                    if (sumNum > this.surplusNoBindNum) {
                        this.$modal.msgError(
                            '当前选择的编码数量已超过剩余未编码数量！',
                        )

                        return
                    }

                    if (this.codeList.length === 0) {
                        for (let i = 0; i < sumNum; i++) {
                            let obj = {
                                typeName: this.form.typeName,
                                specificationType: this.form.specificationType,
                                typeId: this.form.typeId,
                                taskId: this.form.taskId,
                                maCode:
                                    this.form.exCode +
                                    ('00000' + (suffixOneCode + i)).slice(-4),
                                assetsCode: '',
                                fixCode: this.form.fixCode,
                                id: ('00000' + (suffixOneCode + i)).slice(-4),
                            }
                            this.codeList.push(obj)
                        }

                        this.surplusNoBindNum -= this.codeList.length
                    } else {
                        for (let i = 0; i < sumNum; i++) {
                            let obj = {
                                typeName: this.form.typeName,
                                specificationType: this.form.specificationType,
                                typeId: this.form.typeId,
                                taskId: this.form.taskId,
                                maCode:
                                    this.form.exCode +
                                    ('00000' + (suffixOneCode + i)).slice(-4),
                                assetsCode: '',
                                fixCode: this.form.fixCode,
                                id: ('00000' + (suffixOneCode + i)).slice(-4),
                            }

                            const isRepeat = this.codeList.every(
                                (e) => e.id != obj.id,
                            )
                            if (isRepeat) {
                                this.codeList.push(obj)
                                this.surplusNoBindNum -= 1
                            }
                        }
                    }
                }
            })

            if (true) {
                return
            }
            if (sum > this.form.checkNum) {
                this.$modal.msgError(
                    '已绑定编码' +
                        this.form.bindNum +
                        '个,总数量已超过验收数量，请调整后缀范围。',
                )
            } else {
                if ((num1) => num) {
                    for (let i = 0; i < count; i++) {
                        let obj = {
                            typeName: this.form.typeName,
                            specificationType: this.form.specificationType,
                            typeId: this.form.typeId,
                            taskId: this.form.taskId,
                            maCode:
                                this.form.exCode +
                                ('00000' + (num + i)).slice(-4),
                            assetsCode: '',
                            fixCode: this.form.fixCode,
                        }
                        this.codeList.push(obj)
                    }
                } else {
                    this.$modal.msgError('编码后缀范围输入格式不正确')
                }
            }
        },

        /** 提交按钮 */
        submitForm: function () {
            // console.log(this.codeList)
            // if (this.form.fixCode == 0) {
            //     if (this.hasDuplicateField(this.codeList, 'assetsCode')) {
            //         this.$modal.msgError('固定资产编码不能为空')
            //         return false
            //     }
            // }

            let noCode = this.codeList.filter((e) => e.maCode === '')
            if (noCode.length > 0) {
                this.$modal.msgError('编码不可为空')
                noCode.map((e, index) => {
                    if (index === 0) {
                        this.$refs[`inputRef-${e.id}`].focus()
                    }
                })
            }

            if (this.codeList.length == 0) {
                this.$modal.msgError('无新增编码绑定')
            } else {
                const maCodeSet = new Set()
                let hasDuplicates = false

                for (const item of this.codeList) {
                    const maCode = item.maCode

                    console.log(maCodeSet.has(maCode), '是否有编码')
                    if (maCodeSet.has(maCode)) {
                        hasDuplicates = true
                        break
                    }
                    maCodeSet.add(maCode)
                }
                if (hasDuplicates) {
                    this.$modal.msgError(
                        '编码绑定失败,存在重复编码，请重新输入',
                    )
                    return // 停止提交流程
                }
                this.codingLoading = true
                editPurchaseMacode(this.codeList)
                    .then((response) => {
                        if (response.data && response.data.length > 0) {
                            this.codeList = response.data
                            this.$modal.msgError(
                                '编码绑定失败,存在重复编码，请重新输入',
                            )
                        } else {
                            this.$modal.msgSuccess('编码绑定成功')
                            this.open = false
                            this.getList()
                        }
                    })
                    .finally(() => {
                        this.codingLoading = false
                    })
            }
        },
        hasDuplicateField(array, field) {
            const map = {}
            for (let i = 0; i < array.length; i++) {
                const value = array[i][field]
                if (map[value]) {
                    return true
                }
                map[value] = true
            }
            return false
        },
        getdetailmaCodeList(data) {
            console.log(data)
            let param = {
                taskId: this.taskId,
                typeId: data.typeId,
            }
            getMacodeDetailList(param).then((response) => {
                this.getCodeList = response.data
                this.codeList = this.getCodeList.concat(this.newCodeList)
            })
        },
        delCode(row) {
            console.log(row)
            this.codeList.forEach((item, index) => {
                if (item.maCode == row.maCode) {
                    this.codeList.splice(index, 1)
                }
            })

            this.surplusNoBindNum += 1
            // const maCode = row.maCode ;
            // this.$modal.confirm('是否确认删除该数据项？').then(function() {
            //   return delMacodeList(maCode);
            // }).then(() => {
            //   this.getdetailmaCodeList(row);
            //   this.$modal.msgSuccess("删除成功");
            // }).catch(() => {});
        },
        // 返回列表页
        jumpList() {
            const obj = { path: '/store/newBuy/newDevicesList' }
            this.$tab.closeOpenPage(obj)
        },
        async handleBindDetails(row) {
            console.log('🚀 ~ handleBindDetails ~ row:', row.taskId, row)
            this.surplusNoBindNum = row.checkNum - row.bindNum
            this.open = true
            this.isDetail = true
            this.title = '编码绑定详情'
            this.codeList = []
            const res = await getBindCodeDetails({
                taskId: row.taskId,
                typeId: row.typeId,
            })
            console.log('🚀 ~ handleBindDetails ~ res:', res)
            this.codeList = res.data
        },
    },

    watch: {
        open: {
            handler(newValue) {
                if (!newValue) {
                    this.form.suffixOneCode = ''
                    this.form.suffixTwoCode = ''
                    this.form.fixCode = '1'
                }
            },
            deep: true,
        },
    },
}
</script>

<style scoped>
.redColor {
    color: red;
}
</style>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
    width: 60px !important;
    margin-bottom: 10px;
}

.surplus-code {
    padding-bottom: 10px;
    padding-left: 8px;
    font-size: 16px;
}
</style>