yos_web/src/WebsiteManagement/marketproductMag/modules/add.vue

<template>
  <div>
    <el-button
      size="small"
      type="primary"
      @click="addBtn((dialogFormVisible = true))"
      >{{ $t(`新 建`) }}</el-button
    >
    <el-drawer
      :title="$t(`新建营销产品`)"
      :visible.sync="dialogFormVisible"
      size="60%"
      direction="rtl"
      append-to-body
      :show-close="false"
      @close="onClose"
    >
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules" ref="form" size="mini">
            <el-col :span="24">
              <el-form-item :label="$t(`商品`)" prop="itemname">
                <el-popover
                  placement="bottom-start"
                  width="700"
                  trigger="click"
                  v-model="dialogPopover"
                >
                  <productTemplate
                    :sa_fadid="form.sa_fadid"
                    @selectPro="selectPro"
                  ></productTemplate>
                  <el-input
                    slot="reference"
                    v-model="form.itemname"
                    :placeholder="$t(`选择商品`)"
                  ></el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <p style="font-size: 14px; margin-top: 10px">
                  {{ $t("技术参数") }}
                </p>
                <div style="margin-top: 10px; min-height: 200px !important">
                  <myEditor
                    ref="technicalparam"
                    height="360px"
                    :content="form.technicalparam"
                    :id="form.sa_fadid"
                  ></myEditor>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <p style="font-size: 14px; margin-top: 10px">
                  {{ $t("材质说明") }}
                </p>
                <div style="margin-top: 10px; min-height: 200px !important">
                  <myEditor
                    ref="materialdescription"
                    height="360px"
                    :content="form.materialdescription"
                    :id="form.sa_fadid"
                  ></myEditor>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <p style="font-size: 14px; margin-top: 10px">
                  {{ $t("产品概述") }}
                </p>
                <div style="margin-top: 10px; min-height: 200px !important">
                  <myEditor
                    ref="contentstr"
                    height="360px"
                    :content="form.contentstr"
                    :id="form.sa_fadid"
                  ></myEditor>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('分类')" prop="classmx">
                <el-cascader
                  ref="selectdep"
                  size="small"
                  style="width: 100%"
                  :placeholder="$t('分类')"
                  v-model="form.classmx"
                  :options="classData"
                  filterable
                  :props="{
                    emitPath: false,
                    expandTrigger: 'hover',
                    checkStrictly: false,
                    label: 'remarks',
                    value: 'value',
                    children: 'subvalues',
                  }"
                  clearable
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="upload-box">
                <div class="label" style="margin-top: 3px">
                  {{ $t("产品资料") }}
                </div>
                <upload
                  :classType="['image', 'video', 'document', 'pdf']"
                  @oploadIng="oploadIng"
                  ref="upload"
                >
                  <div style="width: 400px; text-align: left">
                    <el-button size="small" type="primary">
                      <span
                        class="icon iconfont"
                        style="margin-right: 5px; font-size: 14px"
                        >&#xe63b;</span
                      >
                      {{ $t("点击上传") }}
                    </el-button>
                  </div>
                </upload>
              </div>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('状态')" prop="status">
                <el-radio-group v-model="form.isonsale" style="width: 100%">
                  <el-radio label="0">{{ $t("新建") }}</el-radio>
                  <el-radio label="1">{{ $t(`发布`) }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button
          size="small"
          @click="onClose"
          plain
          class="normal-btn-width"
          :disabled="loading || disabled"
          >{{ $t(`取 消`) }}</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="onSubmit"
          class="normal-btn-width"
          :disabled="disabled"
          :loading="loading"
          >{{ $t(`确 定`) }}</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import upload from "../compents/upload";
import productTemplate from "@/WebsiteManagement/marketproductMag/compents/productTemplate";
import myEditor from "@/components/my-editor/Editor.vue";
export default {
  name: "add",
  components: { productTemplate, myEditor, upload },
  data() {
    return {
      dialogFormVisible: false,
      dialogPopover: false,
      loading: false,
      disabled: false,
      classData: [],
      form: {
        siteid: JSON.parse(sessionStorage.getItem("active_account")).siteid,
        sa_fadid: 0, //sa_brandid<=0时 为新增
        itemid: "",
        itemname: "",
        itemno: "",
        class: "",
        materialdescription: "",
        technicalparam: "",
        contentstr: "",
        isonsale: "1",
        classmx: "",
      },
      rules: {
        itemname: [
          { required: true, message: this.$t("请选择商品"), trigger: "change" },
        ],
        classmx: [
          { required: true, message: this.$t("请选择分类"), trigger: "change" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    oploadIng(e) {
      this.disabled = e;
    },
    addBtn() {
      this.queryClass();
    },
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return false;
        this.loading = true;
        this.form.technicalparam = this.$refs.technicalparam.html;
        this.form.materialdescription = this.$refs.materialdescription.html;
        this.form.contentstr = this.$refs.contentstr.html;
        const selectdep = this.$refs.selectdep._data.inputValue.split(" / ");
        this.form.class = selectdep[0] || "";
        this.form.classmx = selectdep[1] || "";
        const res = await this.$api.requested({
          id: "20240920101303",
          content: this.form,
        });
        await this.$refs.upload.rebinding("sa_fad", res.data.sa_fadid);
        this.tool.showMessage(res, async () => {
          const res1 = await this.$api.requested({
            id: "20240920101603",
            content: {
              siteid: this.form.siteid,
              sa_fadids: [res.data.sa_fadid],
              isonsale: this.form.isonsale,
            },
          });
          this.dialogFormVisible = false;
          this.onClose();
        });
      });
    },
    selectPro(data) {
      this.dialogPopover = false;
      this.form.itemname = data.itemname;
      this.form.itemid = data.itemid;
      this.form.itemno = data.itemno;
    },
    async queryClass() {
      const res = await this.$store.dispatch(
        "optiontypeselect",
        "marketproductclass"
      );
      res.data.push({
        remarks: "测试",
        value: "测试",
        subvalues: [],
      });
      this.classData = [];
      this.classData = res.data.map((item) => {
        let data = {
          value: item.value,
          remarks: item.remarks,
        };
        if (item.subvalues.length)
          data.subvalues = item.subvalues.map((k) => {
            return {
              value: k,
              remarks: k,
            };
          });
        return data;
      });
    },
    onClose() {
      this.dialogFormVisible = false;
      this.loading = false;
      this.$refs.form.resetFields();
      this.$refs.upload.deleteAllTemporaryFiles();
      this.$refs.technicalparam.html = "";
      this.$refs.materialdescription.html = "";
      this.$refs.contentstr.html = "";
      this.$emit("onSuccess");
    },
  },
};
</script>

<style scoped>
.upload-box {
  width: 100%;
  display: flex;
  padding: 10px 0 13px;
}

.upload-box .label {
  font-size: 14px;
  margin-right: 20px;
  margin-top: 3px;
  color: #606266;
}
</style>