tire-platform-ui/src/views/tirePartsMall/basicData/customerInformation/customerReviewedParamForm.vue

<template>
    <el-dialog
        title="客户无需审批信息维护"
        :visible.sync="visible"
        width="500px"
        @close="handleClose"
        append-to-body
        :close-on-click-modal="false"
    >
        <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="100px"
            size="small"
        >
            <el-form-item label="客户分类" prop="corpsTypeId" required>
                <el-select v-model="form.corpsTypeId" placeholder="请选择客户分类" style="width: 100%">
                    <el-option
                        v-for="item in corpsTypeOptions"
                        :key="item.value"
                        :label="item.title"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="价格类型" prop="priceType" required>
                <el-select v-model="form.priceType" placeholder="请选择价格类型" style="width: 100%">
                    <el-option
                        v-for="item in priceTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="仓库" prop="warehouseId" required>
                <el-select
                    v-model="form.warehouseId"
                    filterable
                    reserve-keyword
                    placeholder="请输入仓库名称搜索"
                    :loading="warehouseLoading"
                    style="width: 100%"
                    @change="handleWarehouseChange"
                >
                    <el-option
                        v-for="item in warehouseOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="业务员" prop="salesMan" required>
                <el-select
                    v-model="form.salesMan"
                    filterable
                    reserve-keyword
                    placeholder="请输入业务员姓名搜索"
                    :loading="salesmanLoading"
                    style="width: 100%"
                    @change="handleSalesmanChange"
                >
                    <el-option
                        v-for="item in salesmanOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>

            <!-- 启用开关 -->
            <el-form-item label="是否启用">
                <el-switch
                    v-model="form.enabled"
                    active-text="启用"
                    inactive-text="禁用"
                    :active-value="true"
                    :inactive-value="false"
                />
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="visible = false">取消</el-button>
      <el-button type="primary" size="small" @click="handleSubmit" :loading="submitting">确定</el-button>
    </span>
    </el-dialog>
</template>

<script>
import {
    getCustomerReviewedParam,
    submitCustomerReviewedParam,
    getWarehouseList,
    getPriceList,
    getSalesUserList,
    getCorpType
} from "../../../../api/tirePartsMall/basicData/customerInformation/customerReviewed";


export default {
    name: "CustomerReviewedParamForm",
    data() {
        return {
            visible: false,
            submitting: false,

            // 表单数据
            form: {
                priceType: "",
                corpsTypeId: null,
                warehouseId: null,
                warehouseName: "",
                salesMan: null,
                salesManName: "",
                enabled: true // true 表示启用，false 表示禁用
            },

            // 校验规则
            rules: {
                corpsTypeId: [{ required: true, message: "请选择客户分类", trigger: "change" }],
                priceType: [{ required: true, message: "请选择价格类型", trigger: "change" }],
                warehouseId: [{ required: true, message: "请选择仓库", trigger: "change" }],
                salesMan: [{ required: true, message: "请选择业务员", trigger: "change" }]
            },

            // 下拉选项
            priceTypeOptions: [
                { value: "FIXED", label: "固定价" },
                { value: "FLOAT", label: "浮动价" },
                { value: "NEGOTIATE", label: "议价" }
                // 可根据实际枚举扩展
            ],
            warehouseOptions: [],
            salesmanOptions: [],
            corpsTypeOptions: [],
            warehouseLoading: false,
            salesmanLoading: false
        };
    },
    created() {

        this.getPriceDataList();
        this.searchWarehouses();
        this.searchSalesmen();
        this.getCorpTypeDataList();
    },
    methods: {
        getCorpTypeDataList() {
            getCorpType({ corpType: "KH" }).then(res => {
                this.corpsTypeOptions = res.data.data;
            });
        },
        getDetail() {
            getCustomerReviewedParam().then(res => {
                this.open(res.data.data);
            });
        },
        // 打开弹窗并初始化数据
        open(data = {}) {
            this.visible = true;
            this.$nextTick(() => {
                this.$refs.formRef.resetFields();
                this.form = {
                    id: data.id || "",
                    priceType: data.priceType || "",
                    corpsTypeId: data.corpsTypeId || null,
                    warehouseId: data.warehouseId || null,
                    warehouseName: data.warehouseName || "",
                    salesMan: data.salesMan || null,
                    salesManName: data.salesManName || "",
                    version: data.version || "",
                    enabled: data.isDeleted === 0
                };
            });
        },

        // 搜索仓库
        searchWarehouses() {
            this.warehouseLoading = true;
            getWarehouseList().then(res => {
                this.warehouseOptions = (res.data.data || []).map(item => ({
                    id: item.id,
                    name: item.cname
                }));
            })
                .finally(() => {
                    this.warehouseLoading = false;
                });
        },
        getPriceDataList() {
            getPriceList().then(res => {
                this.priceTypeOptions = res.data.data.map(item => ({
                    value: item.dictValue,
                    label: item.dictKey
                }));
            });
        },
        // 仓库选择后更新名称（可选，用于展示）
        handleWarehouseChange(val) {
            const selected = this.warehouseOptions.find(w => w.id === val);
            this.form.warehouseName = selected ? selected.name : "";
        },

        // 搜索业务员
        searchSalesmen() {
            this.salesmanLoading = true;
            getSalesUserList().then(res => {
                this.salesmanOptions = (res.data.data || []).map(user => ({
                    id: user.id,
                    name: user.name
                }));
            })
                .finally(() => {
                    this.salesmanLoading = false;
                });
        },

        // 业务员选择后更新名称
        handleSalesmanChange(val) {
            const selected = this.salesmanOptions.find(u => u.id === val);
            this.form.salesManName = selected ? selected.name : "";
        },

        // 提交
        handleSubmit() {
            this.$refs.formRef.validate(valid => {
                if (!valid) return;
                this.submitting = true;
                const submitData = {
                    id: this.form.id,
                    priceType: this.form.priceType,
                    corpsTypeId: this.form.corpsTypeId,
                    warehouseId: this.form.warehouseId,
                    warehouseName: this.form.warehouseName,
                    salesMan: this.form.salesMan,
                    salesManName: this.form.salesManName,
                    version: this.form.version,
                    isDeleted: this.form.enabled ? 0 : 1
                };
                submitCustomerReviewedParam(submitData).then(res => {
                    this.$message.success("保存成功");
                    this.submitting = false;
                    this.visible = false;
                }).finally(() => {
                    this.submitting = false;
                });
            });
        },

        // 关闭时重置
        handleClose() {
            this.$emit("close");
        }
    }
};
</script>

<style scoped>
/* 可选样式 */
.dialog-footer {
    text-align: right;
}
</style>