yos_web/src/bgj/pointsbasedproducts/modules/add.vue

<template>
    <div>
        <el-button
            :size="btn_size ? btn_size : 'small'"
            type="primary"
            @click="show"
        >
            {{ title_btn ? $t(title_btn) : $t("新 建") }}
        </el-button>
        <el-drawer
            :title="title_drawer ? $t(title_drawer) : $t(`新建积分商品`)"
            :visible.sync="dialogFormVisible"
            direction="rtl"
            append-to-body
            :show-close="false"
            size="700px"
            @close="onCancel"
        >
            <div class="drawer__panel">
                <el-row :gutter="20">
                    <el-form
                        :model="form"
                        :rules="rules"
                        ref="form"
                        :label-width="tool.onlyZh('100px')"
                        label-position="right"
                        size="mini"
                    >
                        <el-col :span="24">
                            <el-form-item :label="$t('商品名称：')" prop="itemname">
                                <el-input
                                    v-model="form.itemname"
                                    :placeholder="$t('请填写商品名称')"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item :label="$t('商品编号：')" prop="itemno">
                                <el-input
                                    v-model="form.itemno"
                                    :placeholder="$t('请填写商品编号')"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item :label="$t('积分：')" prop="points">
                                <el-input-number
                                    v-model="form.points"
                                    :min="0"
                                    :placeholder="$t('请填写积分')"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item :label="$t('价格：')" prop="price">
                                <el-input-number
                                    v-model="form.price"
                                    :min="0"
                                    :precision="2"
                                    :placeholder="$t('请填写价格')"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item :label="$t('辅助单位：')" prop="isauxunit">
                                <el-checkbox
                                    v-model="form.isauxunit"
                                    :true-label="1"
                                    :false-label="0"
                                >
                                    {{ $t("是否需要辅助单位") }}
                                </el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item :label="$t(`单位`)" prop="unitid">
                                <el-select
                                    style="width: 100%"
                                    v-model="form.unitid"
                                    :placeholder="$t('请选择')"
                                    clearable
                                >
                                    <el-option
                                        v-for="item in unitData"
                                        :key="item.unitid"
                                        :label="$t(item.unitname)"
                                        :value="item.unitid"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item :label="$t(`单位组`)" :prop="form.isauxunit === 1 ? 'unitgroupid' : ''">
                                <el-select
                                    style="width: 100%"
                                    v-model="form.unitgroupid"
                                    :disabled="form.isauxunit === 0"
                                    :placeholder="$t('请选择')"
                                    clearable
                                >
                                    <el-option
                                        v-for="item in unitGroupData"
                                        :key="item.unitgroupid"
                                        :label="$t(item.unitgroupname)"
                                        :value="item.unitgroupid"
                                    >
                                        <p style="float: left">
                                            {{ item.unitgroupname }}
                                        </p>
                                        <p
                                            style="
                                                float: right;
                                                color: #8492a6;
                                                font-size: 13px;
                                            "
                                        >
                                            {{ item.conversionrate
                                            }}{{ item.unitname }}/{{
                                                item.auxunitname
                                            }},{{ $t(`换算率`) }}:{{
                                                "1:" + item.conversionrate
                                            }}
                                        </p>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item :label="$t('最小订购量：')" prop="orderminqty">
                                <el-input-number
                                    v-model="form.orderminqty"
                                    :min="1"
                                    :placeholder="$t('请填写最小订购量')"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item :label="$t('订购增量：')" prop="orderaddqty">
                                <el-input-number
                                    v-model="form.orderaddqty"
                                    :min="1"
                                    :placeholder="$t('请填写订购增量')"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item :label="$t('备注：')" prop="remarks">
                                <el-input
                                    type="textarea"
                                    v-model="form.remarks"
                                    :placeholder="$t('请填写备注')"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="20">
                            <el-form-item :label="$t('商品图：')">
                                <div
                                    class="flex-align-center"
                                    style="flex-wrap: wrap"
                                >
                                    <uploadFile
                                        ref="upload"
                                        style="margin: 10px 10px 10px 0"
                                        :folderid="folderid"
                                        accept=".JPG,.PNG,.jpg,.png"
                                        type="image"
                                        :bindData="bindData"
                                        @onSuccess="uploadSuccess"
                                    >
                                    </uploadFile>
                                    <template v-if="title_btn == '编辑'">
                                        <previewImage
                                            style="
                                                margin: 10px 10px 10px 0;
                                            "
                                            v-for="image in form.attinfos"
                                            :key="image.index"
                                            :image="image"
                                            :deletebtn="true"
                                            @onSuccess="clearCover"
                                        ></previewImage>
                                    </template>
                                </div>

                                <small
                                    style="display: block; margin-top: 18px"
                                    class="info"
                                    >{{
                                        $t(`注:建议上传图片大小`)
                                    }}1024x1024px，{{ $t("大小不超过") }}2M，{{
                                        $t("格式为")
                                    }}JPG/PNG</small
                                >
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
            </div>
            <div class="fixed__btn__panel">
                <el-button
                    size="small"
                    @click="onCancel"
                    class="normal-btn-width"
                    >{{ $t("取 消") }}</el-button
                >
                <el-button
                    :loading="loading"
                    class="normal-btn-width"
                    size="small"
                    :type="title_btn == '编辑' ? 'warning' : 'primary'"
                    @click="onSubmit"
                    >{{ title_btn == "编辑" ? $t("保 存") : $t("确 定") }}
                </el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import uploadFile from "@/components/upload/preview_upload.vue";
import previewImage from "@/components/previewImage/index.vue";
export default {
    name: "add",
    components: { uploadFile, previewImage },
    props: {
        btn_size: String,
        title_btn: String,
        title_drawer: String,
        data: Object,
    },
    data() {
        return {
            folderid: JSON.parse(sessionStorage.getItem("folderid"))
                .appfolderid,
            bindData: {},
            unitData: [],
            unitGroupData: [],
            loading: false,
            dialogFormVisible: false,
            currentData: {},
            form: {
                sc_points_productid: 0,
                itemno: "",
                itemname: "",
                price: 0,
                points: 0,
                isauxunit: 0,
                orderminqty: 1,
                orderaddqty: 1,
                unitid: "",
                unitgroupid: "",
                remarks: "",
                attinfos: [],
            },
            rules: {
                itemname: [
                    {
                        required: true,
                        message: this.$t("请填写商品名称"),
                        trigger: "blur",
                    },
                ],
                itemno: [
                    {
                        required: true,
                        message: this.$t("请填写商品编号"),
                        trigger: "blur",
                    },
                ],
                points: [
                    {
                        required: true,
                        message: this.$t("请填写积分"),
                        trigger: "blur",
                    },
                ],
                price: [
                    {
                        required: true,
                        message: this.$t("请填写价格"),
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        show() {
            this.unitlist();
            this.dialogFormVisible = true;
            if (this.title_btn == "编辑") {
                this.form = Object.assign({}, this.form, this.data);
            }
        },
        async unitlist() {
            const res = await this.$api.requested({
                id: "20220922084803",
                version: 1,
                nocache: true,
                content: {
                    pageSize: 1000,
                    where: {
                        condition: "",
                    },
                },
            });
            this.unitData = res.data;
        },
        onSubmit() {
            this.$refs["form"].validate(async (valid) => {
                if (!valid) return false;
                if (this.form.isauxunit === 1 && !this.form.unitgroupid) {
                    this.$message.error(this.$t("请选择单位组"));
                    return false;
                }
                this.loading = true;
                const res = await this.$api.requested({
                    id: 2026052209110806,
                    content: this.form,
                });
                if (res.code === 0) {
                    this.loading = false;
                    this.$message.error(
                        res.msg ||
                            (this.title_btn == "编辑" ? this.$t("编辑失败") : this.$t("新建失败"))
                    );
                    return;
                }
                this.loading = false;
                this.$message.success(
                    this.title_btn == "编辑" ? this.$t("编辑成功") : this.$t("新建成功")
                );
                this.bindData = {
                    ownertable: "sc_points_product",
                    ownerid: res.data.sc_points_productid,
                    usetype: "default",
                };
                this.$refs["upload"].toUpload();
                this.$emit("onSuccess");
                this.dialogFormVisible = false;
                this.$refs["form"].resetFields();
                setTimeout(() => {
                    if (this.form.sc_points_productid && this.form.sc_points_productid !== 0) {
                        this.$router.push({
                            path: "/pointsbasedproductsDetail",
                            query: {
                                id: this.form.sc_points_productid,
                                rowindex: res.data.rowindex,
                            },
                        });
                        this.$store.dispatch("changeDetailDrawer", true);
                    } else {
                        this.$emit("onSuccess");
                    }
                }, 500);
            });
        },
        onCancel() {
            this.dialogFormVisible = false;
            this.$refs["form"].resetFields();
        },
        uploadSuccess(res) {
            this.$emit("onSuccess");
        },
        clearCover() {
            this.queryMain();
        },
        async queryMain() {
            const res = await this.$api.requested({
                id: 2026052209105106,
                content: {
                    nocache: true,
                    sc_points_productid: this.$route.query.id,
                },
            });
            this.form = Object.assign({}, this.form, res.data);
        },
    },
};
</script>