bonus-ui/src/views/material/purchase/goodsArrived/component/addTools.vue

<template>
    <!-- 新增工机具 -->
    <div>
        <el-form
            :model="maForm"
            ref="maForm"
            size="small"
            :rules="rules"
            :inline="true"
            label-width="120px"
        >
            <el-form-item label="到货日期" prop="arrivalTime">
                <el-date-picker
                    v-model="maForm.arrivalTime"
                    style="width: 240px"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    :picker-options="pickerOptions"
                    type="date"
                    placeholder="请选择到货日期"
                ></el-date-picker>
            </el-form-item> 
            <el-form-item label="物资厂家" prop="supplierId">
                <el-select
                    v-model="maForm.supplierId"
                    placeholder="物资厂家"
                    clearable
                    filterable
                    style="width: 240px"
                    @change="changeSupplier"
                >
                    <el-option
                        v-for="item in supplierList"
                        :key="item.supplierId"
                        :label="item.supplier"
                        :value="item.supplierId"
                    />
                </el-select>
            </el-form-item> 
            <el-form-item label="出厂日期" prop="productionTime">
                <el-date-picker
                    v-model="maForm.productionTime"
                    style="width: 240px"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    :picker-options="pickerOptions"
                    type="date"
                    placeholder="请选择出厂日期"
                     @change="productionTimeChange"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="税率" prop="taxRate">
                <el-input
                    v-model="maForm.taxRate"
                    placeholder="请输入税率"
                    clearable
                    maxlength="50"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                    @input="taxRateChange"
                />
                <span>%</span>
            </el-form-item>

            <el-form-item label="类型规格" prop="deviceType">
                <el-cascader
                    :key="propsKey"
                    v-model="deviceType"
                    :show-all-levels="false"
                    :options="equipmentTypeList"
                    :props="deviceTypeTreeProps"
                    filterable
                    collapse-tags
                    style="width: 240px"
                    placeholder="请选择规格型号"
                    ref="deviceTypeCascader"
                    popper-class="popper-select"
                    @change="deviceTypeChange"
                ></el-cascader>
            </el-form-item>

            <el-form-item label="备注" prop="remark">
                <el-input
                    v-model="maForm.remark"
                    placeholder="请输入备注"
                    clearable
                    maxlength="150"
                    type="textarea"
                    style="width: 240px"
                    rows="1"
                />
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8"> 
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleSave" >保存</el-button>
            </el-col>
        </el-row>

        <el-table
            v-loading="loading"
            :data="equipmentList"
            @selection-change="handleSelectionChange"
        >
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column
                align="center"
                label="序号"
                type="index"
                width="55"
            />
            <el-table-column
                align="center"
                label="物资名称"
                prop="maTypeName"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                align="center"
                label="规格型号"
                prop="typeName"
                show-overflow-tooltip
            />
            <el-table-column align="center" label="单位" prop="unitName" />
            <el-table-column
                label="采购数量"
                prop="purchaseNum"
                align="center"
            >
                <template v-slot="scope">
                    <el-input-number
                        v-model="scope.row.purchaseNum"
                        controls-position="right"
                        style="width: 100%"
                        :min="0"
                    ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column
                label="购置单价(元含税)"
                prop="purchaseTaxPrice"
                align="center"
            >
                <template v-slot="scope">
                    <el-input-number
                        v-model="scope.row.purchaseTaxPrice"
                        controls-position="right"
                        style="width: 100%"
                        :min="0"
                        @change="purchaseTaxPriceChange(scope.row,scope.$index)"
                    ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column
                label="购置单价(元不含税)"
                prop="purchasePrice"
                align="center"
            >
                <template slot-scope="scope">
                    <el-input-number
                        v-model="scope.row.purchasePrice"
                        controls-position="right"
                        style="width: 100%"
                        :min="0"
                        @input="purchasePriceChange(scope.row,scope.$index)"
                    ></el-input-number>
                </template>
            </el-table-column>
            <!-- <el-table-column
                label="是否为固定资产"
                prop=""
                align="center"
                width="200"
            >
                <template slot-scope="scope">
                    <el-select
                        v-model="scope.row.supplierId"
                        placeholder="固定资产"
                        filterable
                        clearable
                    >
                    <el-option label="是" value="0"></el-option>
                    <el-option label="否" value="1"></el-option>
                    </el-select>
                </template>
            </el-table-column> -->
            <el-table-column label="物资厂家" prop="supplierId" width="200">
                <template slot-scope="scope">
                <el-select v-model="scope.row.supplierId" placeholder="物资厂家" filterable clearable style="width: 180px">
                    <el-option v-for="item in supplierList" :key="item.supplierId" :label="item.supplier"
                    :value="item.supplierId" />
                </el-select>
                </template>
            </el-table-column>
            <el-table-column
                label="出厂日期"
                align="center"
                prop="productionTime"
                width="200"
            >
                <template slot-scope="scope">
                    <el-date-picker
                        v-model="scope.row.productionTime"
                        style="width: 100%"
                        value-format="yyyy-MM-dd hh:mm:ss"
                        type="date"
                        range-separator="-"
                        placeholder="出厂日期"
                        clearable
                    ></el-date-picker>
                </template>
            </el-table-column>

            <el-table-column
                label="相关配套资料"
                align="center"
                prop="checkUrlName"
            >
            <template slot-scope="scope">
            <div @click="openGt(scope.row)" style="color: #02a7f0; cursor: pointer">
                {{ '报告管理' }}
            </div>
            </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope" v-if="scope.row.roleId !== 1">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        style="color: red"
                        @click="handleDelete(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <holdingpole-dialog
            :dialog-class="'my-custom-dialog'"
            :initial-visible="showDialog"
            :holdingpoleData="holdingpoleData"
            @close="onDialogClose"
        ></holdingpole-dialog>


        <!-- 报告管理弹窗 -->
      <!-- <el-dialog :title="title" :visible.sync="showGt" width="1000px" height="1000px" append-to-body @close="cancelGt">
          <el-form :model="queryGt" ref="queryFormGt" size="small" :inline="true"  label-width="68px">        </el-form>

      <el-table v-loading="loadingTwo" :data="gtList" width="600px" height = "600px" >
        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
        <el-table-column label="序号" align="center" width="80" type="index">
        <template slot-scope="scope">
          <span>{{ (queryGt.pageNum - 1) * queryGt.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
        <el-table-column label="杆塔id" align="center" prop="gtId" v-if="false" />
        <el-table-column label="杆塔编号" align="center" prop="gtCode" sortable/>
        <el-table-column label="杆塔经度" align="center" prop="lon" sortable/>
        <el-table-column label="杆塔纬度" align="center" prop="lat" sortable/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdateGt(scope.row)"
              v-hasPermi="['basic:device:edit']"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDeleteGt(scope.row)"

            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
       <pagination
        v-show="totalTwo>0"
        :total="totalTwo"
        :page.sync="queryGt.pageNum"
        :limit.sync="queryGt.pageSize"
        @pagination="getListGt"
      /> -->
<!-- 
      </el-dialog>  -->
    </div>

    
</template>

<script>
// import {
// } from '@/api/store/newBuy'
import {
    getPurchaseCheckInfo,
    equipmentTypeTree,
    addPurchaseCheckInfo,
    updatePurchaseCheckInfo,
} from '@/api/purchase/goodsArrived';
import { getListFacturer } from '@/api/ma/supplier';
// import { getUserByRoleList } from '@/api/system/user'

// import Treeselect from '@riophae/vue-treeselect'
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// import HoldingpoleDialog from '@/components/HoldingpoleDialog/index.vue'

// import {} from '@/api/store/newBuy'

export default {
    name: 'AddTools',
    dicts: ['sys_normal_disable'],
    // components: { Treeselect, HoldingpoleDialog },
    props: {
        isEdit: {
            type: Boolean,
            default: () => {
                return false
            },
        },
        editTaskId: {
            type: [String, Number],
            default: () => {
                return ''
            },
        },
        editId: {
            type: [String, Number],
            default: () => {
                return ''
            },
        },
    },
    data() {
        return {
            taskId: '',
            // isEdit: false,
            // 遮罩层
            loading: false,
            loadingTwo: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            //物资厂家
            supplierList: [],
            //机具类型
            equipmentTypeList: [],
            // 用户数据
            userList: [],
            // 角色表格数据
            equipmentList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            showGt:false,
            // 是否显示弹出层（数据权限）
            openDataScope: false,
            menuExpand: false,
            menuNodeAll: false,
            deptExpand: true,
            deptNodeAll: false,
            showDialog: false,
            holdingpoleData: {},
            // 日期范围
            dateRange: [],
            queryGt: {
            pageNum: 1,
            pageSize: 10,
            id:undefined,
            taskId:undefined,
            typesList:[],
            },
            // 数据范围选项
            dataScopeOptions: [
                {
                    value: '1',
                    label: '全部数据权限',
                },
                {
                    value: '2',
                    label: '自定数据权限',
                },
                {
                    value: '3',
                    label: '本部门数据权限',
                },
                {
                    value: '4',
                    label: '本部门及以下数据权限',
                },
                {
                    value: '5',
                    label: '仅本人数据权限',
                },
            ],
            // 菜单列表
            menuOptions: [],
            // 部门列表
            deptOptions: [],
            // 查询参数
            queryParams: {
                equipmentId: undefined,
                productionTime: '',
                supplierId: '',
            },
            maForm: {
                taxRate:13,
                purchaseTime: '',
                arrivalTime: '',
                purchaser: '',
                remark: '',
                purchaseNumber: '',
            },
            // 表单参数
            form: {},
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            // 表单校验
            rules: {
                // deviceType: [
                //     {
                //         required: true,
                //         message: '请选择类型规格',
                //         trigger: 'blur',
                //     },
                // ],
                arrivalTime: [
                    {
                        required: true,
                        message: '请选择到货日期',
                        trigger: 'blur',
                    },
                ],
                // purchaser: [
                //   { required: true, message: "采购员不能为空", trigger: "blur" }
                // ]
            },
            deviceTypeTreeProps: {
                children: 'children',
                label: 'typeName',
                // multiple: false,
                value: 'typeId',
                multiple: true,
            },
            deviceType: [],
            propsKey: 1000,
            // taxRate:0,
        }
    },
    computed: {
        pickerOptions() {
            return {
                disabledDate(time) {
                    const currentDate = new Date()
                    currentDate.setHours(0, 0, 0, 0)
                    return time.getTime() < currentDate.getTime()
                },
            }
        },
    },
    watch: {
        'maForm.purchaseTime'() {
            if (this.maForm.purchaseTime != '') {
                // this.maForm.arrivalTime = ''
            }
        },
    },
    mounted() {
        this.equipmentType()
        this.supplierInfoList()
        if (this.isEdit) {
            console.log('isEdit',this.isEdit)
            this.taskId = this.editTaskId
            this.id = this.editId
            this.getTaskInfo()
        }
        // this.getUserList()
        // this.getList();
        
    },
    methods: {
        taxRateChange(val){
            this.maForm.taxRate = val.replace(/[^\d.]/g,'')
            this.equipmentList.forEach(item=>{
                item.purchaseTaxPrice = item.purchasePrice*(1 + val/100)
            })
        },
        purchaseTaxPriceChange(row,val){
            // this.equipmentList[val].purchasePrice = (row.purchaseTaxPrice/(1 + this.maForm.taxRate/100)).toFixed(2)
            row.purchasePrice = (row.purchaseTaxPrice/(1 + this.maForm.taxRate/100)).toFixed(2)
        },
        purchasePriceChange(row,val){
            // this.equipmentList[val].purchaseTaxPrice = (row.purchasePrice*(1 + this.maForm.taxRate/100)).toFixed(2)
            row.purchaseTaxPrice = (row.purchasePrice*(1 + this.maForm.taxRate/100)).toFixed(2)
        },
       
        getParentsById(list, id) {
            for (let i in list) {
                if (list[i].typeId == id) {
                    //查询到就返回该数组对象的value
                    return [list[i].typeId]
                }
                if (list[i].children) {
                    let node = this.getParentsById(list[i].children, id)
                    if (node !== undefined) {
                        //查询到把父节把父节点加到数组前面
                        node.unshift(list[i].typeId)
                        return node
                    }
                }
            }
        },

        /** 查询用户列表--采购员 */
        getUserList() {
            getUserByRoleList({ roleIds: [152] }).then((response) => {
                this.userList = response.data
            })
        },
        /** 物资厂家 */
        supplierInfoList() {
            let param = {
                pageNum: 1,
                pageSize: 100,
                keyWord:undefined
            }
            getListFacturer(param).then((response) => {
                this.supplierList = response.rows
            })
        },
        /** 机具类型 */
        equipmentType() {
            equipmentTypeTree().then((response) => {
                this.equipmentTypeList = response.data
                this.equipmentTypeList.forEach((item, index) => {
                    if (item.children && item.children.length > 0) {
                        item.children.forEach((item2, index2) => {
                            if (item2.children && item2.children.length > 0) {
                                item2.children.forEach((item3) => {
                                    if (
                                        item3.children &&
                                        item3.children.length > 0
                                    ) {
                                        item3.children.forEach((item4) => {
                                            item4.maTypeName =
                                                item3.typeName
                                            item4.specificationType =
                                                item4.typeName
                                            this.$set(item4, 'purchaseTaxPrice', 0)
                                            this.$set(item4, 'purchasePrice', 0)
                                        })
                                    }
                                })
                            }
                        })
                    }
                })

                let selectList = []
                this.equipmentList.forEach((e) => {
                    selectList.push(
                        this.getParentsById(this.equipmentTypeList, e.typeId),
                    )
                })
                this.deviceType = selectList
            })
        },

        //添加机具类型
        select(row) {
            console.log(row)
            if (row.level == 4) {
                for (let i = 0; i < this.equipmentList.length; i++) {
                    if (this.equipmentList[i].typeId == row.typeId) {
                        this.equipmentList.splice(i, 1)
                        break
                    }
                }

                // 如果有厂家则代入
                if (this.queryParams.supplierId) {
                    this.$set(row, 'supplierId', this.queryParams.supplierId)
                } else {
                    this.$set(row, 'supplierId', '')
                }
                this.$set(row, 'createTime', null)
                this.$set(row, 'productionTime', '')
                // this.$set(row, 'supplierId', '')
                this.$set(row, 'purchaseTaxPrice', 0)
                this.$set(row, 'purchasePrice', 0)
                this.$set(row, 'purchaseNum', 1)
                this.equipmentList.unshift(row)
            }
        },
        //选择物资厂家
        changeSupplier(supplierId) {
            this.equipmentList.forEach((item) => {
                this.$set(item, 'supplierId', supplierId)
            })
        },
        //选择出厂日期
        changeTime(time) {
            console.log(time)
            this.equipmentList.forEach((item) => {
                this.$set(item, 'productionTime', time)
            })
        },

        //获取任务详情--- 编辑回显数据
        getTaskInfo() {
            // this.loading = true;
            getPurchaseCheckInfo({taskId:this.taskId,id:this.id}).then((response) => {
                // this.taskInfo = response.data
                this.maForm.purchaseTime = response.data.purchaseTime
                this.maForm.arrivalTime = response.data.purchaseCheckInfo.arrivalTime
                // this.maForm.purchaser = response.data.purchaser
                this.maForm.remark = response.data.purchaseCheckInfo.remark
                this.maForm.taxRate = response.data.purchaseCheckInfo.taxRate
                // this.maForm.purchaseNumber = response.data.purchaseNumber
                this.maForm.productionTime = response.data.purchaseCheckInfo.productionTime
                this.equipmentList = response.data.purchaseCheckDetailsList
                console.log(this.equipmentList)
                // this.loading = false;
            })
        },

        //打开报告管理页面
        openGt(row){
          this.proId = row.proId;
          this.title = "新购验收报告管理"
          this.showGt = true;
          this.loadingTwo = true
        //   this.getListGt();
        },
        
        cancelGt() {
            this.showGt = false;
            this.resetForm("queryFormGt");
        },

        //         /** 杆塔重置按钮操作 */
        // resetQueryGt() {
        //     this.resetForm("queryFormGt");
        //     this.currentSelectionGt = []//重置清除已选列表
        //     this.handleQueryGt();
        // },
        getParentsById(list, id) {
            for (let i in list) {
                if (list[i].typeId == id) {
                    //查询到就返回该数组对象的value
                    return [list[i].typeId]
                }
                if (list[i].children) {
                    let node = this.getParentsById(list[i].children, id)
                    if (node !== undefined) {
                        //查询到把父节把父节点加到数组前面
                        node.unshift(list[i].typeId)
                        return node
                    }
                }
            }
        },

        /** 查询右侧列表 */
        getList() {
            // this.loading = true;
            // listRole().then(response => {
            //       this.equipmentList = response.rows;
            //       this.total = response.total;
            //       this.loading = false;
            //     }
            // );
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 取消按钮（数据权限）
        cancelDataScope() {
            this.openDataScope = false
            this.reset()
        },
        // 表单重置
        reset() {
            if (this.$refs.menu != undefined) {
                this.$refs.menu.setCheckedKeys([])
            }
            ;(this.menuExpand = false),
                (this.menuNodeAll = false),
                (this.deptExpand = true),
                (this.deptNodeAll = false),
                (this.form = {
                    roleId: undefined,
                    roleName: undefined,
                    roleKey: undefined,
                    roleSort: 0,
                    status: '0',
                    menuIds: [],
                    deptIds: [],
                    menuCheckStrictly: true,
                    deptCheckStrictly: true,
                    remark: undefined,
                })
            this.resetForm('form')
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.roleId)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },

        /** 新增按钮操作 */
        handleSave() {
            console.log(this.equipmentList)
            if (this.equipmentList.length > 0) {
                this.$refs['maForm'].validate((valid) => {
                    if (valid) {

                        this.maForm.taskId = this.taskId
                        this.maForm.checkDetailsList = this.equipmentList
                        // console.log(this.maForm)
                            if (this.equipmentList.length > 0) {
                                this.$modal
                                    .confirm('是否确认保存当前页面')
                                    .then(function () {})
                                    .then(() => {
                                        if (this.isEdit) {
                                            console.log('编辑')
                                            this.loading = true
                                            updatePurchaseCheckInfo(
                                                this.maForm,
                                            ).then((response) => {
                                                if (response.code == 200) {
                                                    this.$modal.msgSuccess(
                                                        '编辑成功',
                                                    )
                                                    // this.$tab.closeOpenPage({
                                                    //     path: '/store/newBuy/newDevicesList',
                                                    // })

                                                    this.$emit(
                                                        'addToolsSuccess',
                                                    )
                                                }
                                                this.loading = false
                                            })
                                        } else if (!this.isEdit) {
                                            console.log('新增')
                                            this.loading = true
                                            addPurchaseCheckInfo(
                                               {purchaseCheckDetailsList: this.maForm.checkDetailsList,purchaseCheckInfo:this.maForm}
                                            ).then((response) => {
                                                if (response.code == 200) {
                                                    this.$modal.msgSuccess(
                                                        '新增成功',
                                                    )
                                                    // this.$tab.closeOpenPage({
                                                    //     path: '/store/newBuy/newDevicesList',
                                                    // })

                                                    this.$emit(
                                                        'addToolsSuccess',
                                                    )
                                                }
                                                this.loading = false
                                            })
                                        }
                                    })
                                    .catch(() => {})
                            } else {
                                this.$modal.msgError(
                                    '请先选择并添加机具类型！！！',
                                )
                            }
                        
                    }
                })
            }
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            // this.reset();
            //   this.form = response.data;
            //   this.open = true;
        },
        /** 明细按钮操作 */
        handleDetail(row) {
            this.holdingpoleData = row
            this.showDialog = true
        },
        onDialogClose() {
            console.log('弹窗已关闭')
            this.showDialog = false
            // 在这里执行关闭后的相关操作
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            // console.log(row.id)
            this.$modal
                .confirm('是否确认删除所选择的数据项？')
                .then(() => {
                    this.deviceType.forEach((e, index) => {
                        if (e[3] === row.typeId) {
                            this.deviceType.splice(index, 1)
                            this.propsKey++
                        }
                    })
                    this.equipmentList.forEach((item, index) => {
                        if (item.id == row.id) {
                            this.equipmentList.splice(index, 1)
                        }
                    })
                })
                .catch(() => {})

            // const roleIds = row.roleId || this.ids;
            // this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
            //   return delRole(roleIds);
            // }).then(() => {
            //   this.getList();
            //   this.$modal.msgSuccess("删除成功");
            // }).catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
            // this.download('system/role/export', {
            //   ...this.queryParams
            // }, `role_${new Date().getTime()}.xlsx`)
        },
        productionTimeChange(val){
            this.equipmentList.forEach(item=>{
                item.productionTime=val
            })
        },
        deviceTypeChange(val) {
            const deviceTypeList =
                this.$refs.deviceTypeCascader.getCheckedNodes()
            let tempList = []
            if (val.length > 0) {
                const items = val.map((e) => {
                    return e[3]
                })
                for (let i of items) {
                    for (let z of deviceTypeList) {
                        if (z.data.typeId === i) {
                            const obj = JSON.parse(JSON.stringify(z.data))
                            obj.supplierId = ''
                            obj.createTime = null
                            obj.productionTime = ''
                            obj.purchaseTaxPrice = 0
                            obj.purchaseTaxPrice = 0
                            obj.purchaseNum = 1
                            tempList.push(obj)
                            break
                        }
                    }
                }

                const newDataListNew = [...this.equipmentList, ...tempList]
                const map = new Map()
                for (let item of newDataListNew) {
                    if (!map.has(item.typeId)) {
                        map.set(item.typeId, item)
                    }
                }
                const newArray = [...map.values()]
                let newArray_array = []
                items.forEach((e) => {
                    newArray.forEach((j) => {
                        if (e == j.typeId) {
                            newArray_array.push(j)
                        }
                    })
                })
                this.equipmentList = newArray_array
            } else {
                this.equipmentList = []
            }
        },
    },
}
</script>
<style lang="scss">
.popper-select {
    .el-cascader-panel .el-scrollbar .el-checkbox {
        display: none;
    }

    .el-cascader-panel .el-scrollbar:nth-child(4) .el-checkbox {
        display: block !important;
    }
}
</style>