tire-platform-ui/src/views/tirePartsMall/basicData/commodityInformation/detailsPage.vue

<template>
    <div>
        <div class="borderless">
            <div class="customer-head">
                <div class="customer-back">
                    <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                        @click="backToList">
                        返回列表
                    </el-button>
                </div>
                <div class="add-customer-btn">
                    <el-button v-if="form.enableOrNot == 0" size="small" @click="disabled(1)">
                        启用
                    </el-button>
                    <el-button v-if="form.enableOrNot == 1" size="small" @click="disabled(0)">
                        禁用
                    </el-button>
                    <el-button type="primary" size="small" @click="editCustomer">
                        保存数据
                    </el-button>
                </div>
            </div>
            <trade-card title="基础资料" style="margin-top: 60px">
                <avue-form ref="form" class="trading-form" v-model="form" :option="option" :key="key">
                    <template slot="goodsTypeId" slot-scope="{disabled}">
                        <div style="display:flex;">
                            <avue-cascader :disabled="disabled" :emit-path="false" check-strictly :show-all-levels="false"
                                v-model="form.goodsTypeId" placeholder="请选择产品分类" :dic="goodsTypeList"
                                :props="props"></avue-cascader>
                            <i class="el-icon-circle-plus-outline" style="font-size:18px;line-height: 32px;margin-left:4px"
                                @click="goodsTypeVisible = true"></i>
                        </div>
                    </template>
                    <template slot="unit" slot-scope="{disabled}">
                        <div style="display:flex;">
                            <avue-select :disabled="disabled" v-model="form.unit" filterable placeholder="请选择单位"
                                :dic="unitList" :props="props2"></avue-select>
                            <i class="el-icon-circle-plus-outline" style="font-size:18px;line-height: 32px;margin-left:4px"
                                @click="$refs.dictbiz.open()"></i>
                        </div>
                    </template>
                    <template slot="whether" slot-scope="{disabled}">
                        <!--<el-switch v-model="form.whether" active-text="是" inactive-text="否" active-value="1" inactive-value="0" @change="whetherChange"/>-->
                        <el-switch v-model="form.whether" :disabled="disabled || isWhether" active-text="是"
                            inactive-text="否" active-value="1" inactive-value="0" />
                    </template>
                    <template slot="explosionProof" slot-scope="{disabled}">
                        <!--<el-switch v-model="form.explosionProof" :disabled="disabled" active-text="是" inactive-text="否"-->
                        <!--    active-value="1" inactive-value="0" />-->
                        <!--<el-radio v-model="form.explosionProof"></el-radio>-->
                        <el-checkbox v-model="form.explosionProof" :checked="form.explosionProof == 1" :true-label="1" :false-label="0"></el-checkbox>
                    </template>

                    <template slot="originalFactory" slot-scope="{disabled}">
                        <!--<el-switch v-model="form.originalFactory" :disabled="disabled" active-text="是" inactive-text="否"-->
                        <!--           active-value="1" inactive-value="0" />-->
                        <el-checkbox v-model="form.originalFactory" :checked="form.originalFactory == 1" :true-label="1" :false-label="0"></el-checkbox>
                    </template>
                    <template slot="selfRecovery" slot-scope="{disabled}">
                        <!--<el-switch v-model="form.selfRecovery" :disabled="disabled" active-text="是" inactive-text="否"-->
                        <!--           active-value="1" inactive-value="0" />-->
                        <el-checkbox v-model="form.selfRecovery" :checked="form.selfRecovery == 1" :true-label="1" :false-label="0"></el-checkbox>
                    </template>
                </avue-form>
            </trade-card>
            <containerTitle title="附件信息"></containerTitle>
            <c-upload :data="filesList" display deleteUrl="/api/blade-sales-part/goodsfiles/remove"
                :enumerationValue="160.1" />
            <el-dialog title="设置产品分类" v-dialogDrag :visible.sync="goodsTypeVisible" class="avue-dialog" width="80%"
                append-to-body @closed="goodsTypeClosed">
                <span>
                    <!-- <avue-form :key="reload" ref="goodsType" v-model="form2" :option="option2" style="margin-top:20px"></avue-form> -->
                    <!--<goods-type></goods-type>-->
                    <corp-type></corp-type>
                </span>
                <div class="avue-dialog__footer">
                    <el-button @click="goodsTypeVisible = false" size="mini">取 消</el-button>
                    <el-button @click="saveGoodstype" type="primary" size="mini">确 定</el-button>
                </div>
            </el-dialog>
            <!--<el-dialog title="添加仓库" v-dialogDrag :visible.sync="storageVisible" class="avue-dialog avue-dialog&#45;&#45;top" width="30%" append-to-body @closed="storageClosed">-->
            <!--  <span>-->
            <!--    <avue-form :key="reload2" ref="storage" v-model="form3" :option="option3" style="margin-top:20px"></avue-form>-->
            <!--  </span>-->
            <!--  <div class="avue-dialog__footer">-->
            <!--    <el-button @click="storageVisible = false" size="mini">取 消</el-button>-->
            <!--    <el-button @click="savestorage" type="primary" size="mini">确 定</el-button>-->
            <!--  </div>-->
            <!--</el-dialog>-->
            <dictbiz-dialog ref="dictbiz" title="添加单位" code="unit" parentId="1585962784498225154"
                @closed="getAllWorkDicts"></dictbiz-dialog>
        </div>
    </div>
</template>

<script>
import {
    getGoodstype,
    //   getDetails,
    goodsTypesubmit,
    getStoragetype,
    //   submit,
    itemRemove,
    //   disabled,
    getStoragelist,
    storagesubmit
} from "@/api/basicData/product";
import {
    getDetails,
    getCorpType,
    submit,
    customerList,
    itemDel,
    disabled
} from "@/api/tirePartsMall/basicData/commodityInformation"
import { optionList } from "./js/optionList";
import goodsType from '@/components/goodsType/index'
import corpType from './components/index'

export default {
    name: "index",
    data() {
        return {
            loadingBtn: false,
            goodsTypeVisible: false,
            storageVisible: false,
            isWhether: false,
            form: {},
            form2: {},
            form3: {},
            data: [],
            key: 0,
            option: {
                menuBtn: false,
                labelWidth: 100,
                disabled: false,
                column: [
                    {
                        label: "名称",
                        prop: "cname",
                        span: 16,
                        rules: [{
                            required: true,
                            message: " ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "产品分类",
                        prop: "goodsTypeId",
                        type: 'select',
                        dicData: [],
                        props: {
                            label: 'detailedAddress',
                            value: 'detailedAddress'
                        },
                        filterable: true,
                        span: 8,
                        rules: [{
                            required: true,
                            message: " ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "单位",
                        prop: "unit",
                        type: "select",
                        props: {
                            label: "dictValue",
                            value: "dictValue"
                        },
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=unit",
                        span: 8,
                        rules: [{
                            required: true,
                            message: " ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "品牌",
                        prop: "brandId",
                        span: 8,
                        type: 'select',
                        props: {
                            label: 'cname',
                            value: 'id',
                            disabled: 'disabled'
                        },
                        dicUrl: '/api/blade-sales-part/brandDesc/listAllV1?type=PP&enableOrNot=1',
                        rules: [{
                            required: true,
                            message: " ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "轮胎编码",
                        prop: "code",
                        span: 8,
                        rules: [{
                            required: true,
                            message: " ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "规格型号",
                        prop: "specificationAndModel",
                        span: 8,
                        rules: [{
                            required: true,
                            message: " ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "花纹",
                        prop: "brandItem",
                        span: 8,
                        rules: [{
                            required: true,
                            message: " ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "产地",
                        prop: "placeProduction",
                        span: 8,
                    },
                    {
                        label: "供应商",
                        prop: "corpId",
                        span: 8,
                        type: 'select',
                        props: {
                            label: 'cname',
                            value: 'id'
                        },
                        dicUrl: '/api/blade-sales-part/corpsDesc/listAll?corpType=GYS'
                    },
                    {
                        label: "所属公司",
                        prop: "salesCompanyId",
                        span: 8,
                        type: 'select',
                        props: {
                            label: 'fullName',
                            value: 'id'
                        },
                        display:false,
                        rules: [{
                            required: true,
                            message: " ",
                            trigger: "blur"
                        }],
                        dicUrl: '/api/blade-system/dept/top-list'
                    },
                    {
                        label: "快捷品名查询",
                        prop: "cnameInt",
                        span: 8,
                    },
                    {
                        label: "轮胎描述",
                        prop: "goodsDescription",
                        span: 8,
                    },
                    // {
                    //   label: "采购价",
                    //   prop: "purchasePrice",
                    //   type: 'number',
                    //   minRows: 0,
                    //   controls: false,
                    //   span: 8,
                    //   rules: [{
                    //     required: true,
                    //     message: " ",
                    //     trigger: "blur"
                    //   }]
                    // },
                    // {
                    //   label: "销售价",
                    //   prop: "salesPrice",
                    //   type: 'number',
                    //   minRows: 0,
                    //   controls: false,
                    //   span: 8,
                    //   rules: [{
                    //     required: true,
                    //     message: " ",
                    //     trigger: "blur"
                    //   }]
                    // },
                    // {
                    //   label: "售价1",
                    //   prop: "priceOne",
                    //   type: 'number',
                    //   minRows: 0,
                    //   controls: false,
                    //   span: 8,
                    //   rules: [{
                    //     required: true,
                    //     message: " ",
                    //     trigger: "blur"
                    //   }]
                    // },
                    // {
                    //   label: "售价2",
                    //   prop: "priceTwo",
                    //   type: 'number',
                    //   minRows: 0,
                    //   controls: false,
                    //   span: 8,
                    //   rules: [{
                    //     required: true,
                    //     message: " ",
                    //     trigger: "blur"
                    //   }]
                    // },
                    // {
                    //   label: "售价3",
                    //   prop: "priceThree",
                    //   type: 'number',
                    //   minRows: 0,
                    //   controls: false,
                    //   span: 8,
                    //   rules: [{
                    //     required: true,
                    //     message: " ",
                    //     trigger: "blur"
                    //   }]
                    // },
                    // {
                    //   label: "售价4",
                    //   prop: "priceFour",
                    //   type: 'number',
                    //   minRows: 0,
                    //   controls: false,
                    //   span: 8,
                    //   rules: [{
                    //     required: true,
                    //     message: " ",
                    //     trigger: "blur"
                    //   }]
                    // },
                    // {
                    //   label: "售价5",
                    //   prop: "priceFive",
                    //   type: 'number',
                    //   minRows: 0,
                    //   controls: false,
                    //   span: 8,
                    //   rules: [{
                    //     required: true,
                    //     message: " ",
                    //     trigger: "blur"
                    //   }]
                    // },
                    // {
                    //   label: "售价6",
                    //   prop: "priceSix",
                    //   type: 'number',
                    //   minRows: 0,
                    //   controls: false,
                    //   span: 8,
                    //   rules: [{
                    //     required: true,
                    //     message: " ",
                    //     trigger: "blur"
                    //   }]
                    // },
                    // {
                    //   label: "售价7",
                    //   prop: "priceSeven",
                    //   type: 'number',
                    //   minRows: 0,
                    //   controls: false,
                    //   span: 8,
                    //   rules: [{
                    //     required: true,
                    //     message: " ",
                    //     trigger: "blur"
                    //   }]
                    // },
                    // {
                    //   label: "售价8",
                    //   prop: "priceEight",
                    //   type: 'number',
                    //   minRows: 0,
                    //   controls: false,
                    //   span: 8,
                    //   rules: [{
                    //     required: true,
                    //     message: " ",
                    //     trigger: "blur"
                    //   }]
                    // },
                    {
                        label: "配套标记",
                        prop: "matchedMarkings",
                        span: 8
                    },
                    {
                        label: "库存预警",
                        prop: "inventoryAlert",
                        span: 8
                    },
                    {
                        label: "防爆",
                        prop: "explosionProof",
                        span: 2,
                        type: 'select',
                        dicData: [{
                            label: '否',
                            value: 0
                        }, {
                            label: '是',
                            value: 1
                        }],
                    },
                    {
                        label: "静音棉",
                        prop: "originalFactory",
                        span: 2,
                        type: 'select',
                        dicData: [{
                            label: '否',
                            value: 0
                        }, {
                            label: '是',
                            value: 1
                        }],
                    },
                    {
                        label: "自修补",
                        prop: "selfRecovery",
                        span: 2,
                        type: 'select',
                        dicData: [{
                            label: '否',
                            value: 0
                        }, {
                            label: '是',
                            value: 1
                        }],
                    },{
                        label: "是否管理批次号",
                        prop: "whether",
                        labelWidth: 120,
                        span: 8,
                        rules: [{
                            required: true,
                            message: " ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        type: "textarea",
                        minRows: 3,
                        span: 24,
                    }
                ]
            },
            option2: {
                menuBtn: false,
                labelWidth: 80,
                column: [
                    {
                        label: "分类名称",
                        prop: "cname",
                        rules: [
                            {
                                required: true,
                                message: "",
                                trigger: "blur"
                            }
                        ],
                        span: 24,
                    },
                    {
                        label: "上级类型",
                        prop: "parentId",
                        dicData: [],
                        type: "tree",
                        props: {
                            label: "title",
                            value: "id"
                        },
                        span: 24,
                    }
                ]
            },
            option3: {
                menuBtn: false,
                labelWidth: 80,
                column: [
                    {
                        label: "仓库名称",
                        prop: "cname",
                        rules: [
                            {
                                required: true,
                                message: "",
                                trigger: "blur"
                            }
                        ],
                        span: 24,
                    },
                    {
                        label: "仓库编码",
                        prop: "code",
                        rules: [
                            {
                                required: true,
                                message: "",
                                trigger: "blur"
                            }
                        ],
                        span: 24,
                    },
                    {
                        label: "上级类型",
                        prop: "parentId",
                        dicData: [],
                        type: "tree",
                        props: {
                            label: 'cname',
                            value: 'id'
                        },
                        span: 24,
                    }
                ]
            },
            filesList: [],
            props: {
                label: 'title',
                value: 'value'
            },
            props2: {
                label: 'dictValue',
                value: 'dictValue'
            },
            goodsTypeList: [],
            unitList: [],
            optionList: {}
        };
    },
    components: {
        goodsType,
        corpType
    },
    props: {
        detailData: {
            type: Object
        }
    },
    async created() {
        this.optionList = await this.getColumnData(
            this.getColumnName(218),
            optionList
        );
        if (await this.detailData.goodsTypeId) {
            this.form.goodsTypeId = this.detailData.goodsTypeId;
        }
        if (this.detailData.id) {
            this.getDetail(this.detailData.id);
        }
        if (this.detailData.status == 1) {
            this.option.disabled = true;
        }
        this.getAllWorkDicts()
    },
    methods: {
        getAllWorkDicts() {
            // getGoodstype().then(res => {
            //   this.goodsTypeList = res.data.data;
            //   this.findObject(this.option2.column, "parentId").dicData = res.data.data;
            // });
            getCorpType({ corpType: "SP" }).then(res => {
                console.log(res);
                this.goodsTypeList = res.data.data;
            })
            customerList({ corpType: "SP" }).then(res => {
                console.log('kk', res);
                // this.goodsTypeList = res.data.data.records;
                this.findObject(this.option2.column, "parentId").dicData = res.data.data.records;
            });
            // getStoragelist().then(res => {
            //   this.findObject(this.optionList.column, "storageId").dicData = res.data;
            //   this.findObject(this.option3.column, "parentId").dicData = res.data;
            // });
            this.getWorkDicts("unit").then(res => {
                this.unitList = res.data.data;
            });
        },
        cellStyle() {
            return "padding:0;height:40px;";
        },
        addRow() {
            this.data.push({ $cellEdit: true })
        },
        rowCell(row, index) {
            this.$refs.crud.rowCell(row, index)
        },
        rowSave(form, done) {
            done()
        },
        rowUpdate(form, index, done) {
            done()
        },
        rowDel(row, index) {
            this.$confirm("确定删除数据?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                if (row.id) {
                    itemRemove({ ids: row.id }).then(res => {
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        });
                        this.data.splice(index, 1);
                    });
                } else {
                    this.$message({
                        type: "success",
                        message: "删除成功!"
                    });
                    this.data.splice(index, 1);
                }
            });
        },
        disabled(val) {
            disabled({ id: this.form.id, enableOrNot: val }).then(res => {

                this.$message({
                    type: "success",
                    message: val ? '启用成功' : '禁用成功'
                });
                this.getDetail(this.detailData.id);
                if (val == 0) {
                    console.log('禁用中');
                    this.option.disabled = false;
                    for (let item of this.option.column) {
                        this.$set(item, 'disabled', false)
                    }
                }
            })
        },
        saveGoodstype() {
            this.$refs["goodsType"].validate((valid, done) => {
                done();
                if (valid) {
                    goodsTypesubmit({ ...this.form2, status: 0 }).then(res => {
                        this.getAllWorkDicts()
                    })
                    this.goodsTypeVisible = false
                } else {
                    return false;
                }
            });
        },
        savestorage() {
            // this.$refs["storage"].validate((valid, done) => {
            //   done();
            //   if (valid) {
            //     storagesubmit({ ...this.form3, status: 0 }).then(res => {
            //       this.getAllWorkDicts()
            //     })
            //     this.storageVisible = false
            //   } else {
            //     return false;
            //   }
            // });
            this.getAllWorkDicts()
            this.goodsTypeVisible = false
        },
        goodsTypeClosed() {
            // this.reload = Math.random();
            // this.form2 = this.$options.data().form2
        },
        storageClosed() {
            this.reload2 = Math.random();
            this.form3 = this.$options.data().form3
        },
        getDetail(id) {
            this.loadingBtn = true
            getDetails({ id: id }).then(res => {
                this.form = res.data.data;
                this.form.explosionProof += ''
                // this.data = res.data.data.stockGoodsList;
                this.filesList = res.data.data.goodsFilesList
                // 把详情得到的主图附图状态从数值型转化成字符串型
                for(let item of this.filesList) {
                    item.mainImage = item.mainImage + ''
                }
                this.whetherChange(res.data.data.whether)
                //如果modifiable为0则不能修改
                if (this.form.modifiable == 0) {
                    console.log(this.form.modifiable, '0');
                    for (let item of this.option.column) {
                        this.$set(item, 'disabled', true)
                    }
                    this.isWhether = true
                } else if (this.form.modifiable == 1) {
                    console.log(this.form.modifiable, '1');
                    for (let item of this.option.column) {
                        item.disabled = false
                    }
                    this.isWhether = false
                }
                if (this.form.enableOrNot == 1) {
                    for (let item of this.option.column) {
                        this.$set(item, 'disabled', false)
                    }
                }
                this.key++
            }).finally(() => {
                this.loadingBtn = false;
            });
        },
        whetherChange(val) {
            if (val == 0 || val == null) {
                this.findObject(this.optionList.column, "lotNo").hide = true
                this.findObject(this.optionList.column, "lotNo").showColumn = false
            } else {
                this.findObject(this.optionList.column, "lotNo").hide = false
                this.findObject(this.optionList.column, "lotNo").showColumn = true
            }
        },
        //修改提交触发
        editCustomer() {
            this.$refs["form"].validate((valid, done) => {
                done();
                if (valid) {
                    this.loadingBtn = true;
                    submit({
                        ...this.form,
                        type: 0,
                        // stockGoodsList: this.data,
                        goodsFilesList: this.filesList
                    }).then(res => {
                        this.$message.success("保存成功");
                        this.form = res.data.data;
                        // this.data = res.data.data.stockGoodsList;
                        this.filesList = res.data.data.goodsFilesList;
                        this.getDetail(res.data.data.id);
                        // setTimeout(() => {
                        //     this.backToList()
                        // }, 1000);
                    }).finally(() => {
                        this.loadingBtn = false;
                    });
                } else {
                    return false;
                }
            });
        },
        async saveColumn() {
            const inSave = await this.saveColumnData(
                this.getColumnName(218),
                this.optionList
            );
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                });
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        },
        async resetColumn() {
            this.optionList = optionList;
            const inSave = await this.delColumnData(
                this.getColumnName(218),
                optionList
            );
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                });
                this.getAllWorkDicts()
                this.$message.success("重置成功");
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        },
        //返回列表
        backToList() {
            this.$emit("goBack");
        }
    },
};
</script>

<style lang="scss" scoped>
.trading-form ::v-deep .el-form-item {
    margin-bottom: 8px !important;
}

::v-deep .el-dialog__body {
    padding: 0px 20px 15px 20px;
}

::v-deep .el-form-item__error {
    display: none !important;
}

.img-form ::v-deep .el-form-item {
    height: 150px;
    line-height: 150px;
    margin-bottom: 8px !important;
}

.img-form ::v-deep .avue-upload__icon {
    font-size: 20px;
    width: 150px;
    height: 150px;
    line-height: 150px;
}

::v-deep .el-table .cell {
    padding: 0 2px !important;
}

::v-deep .avue-crud .el-table .el-form-item__label {
    left: -1px;
}

.addressTabs {
    display: flex;
    justify-content: center;

    span {
        width: 100px;
        font-size: 18px;
        font-weight: 600;
        text-align: center;
    }
}
</style>