|
|
@@ -0,0 +1,322 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-button size="small" type="primary" @click="editBtn">{{
|
|
|
+ $t(`编 辑`)
|
|
|
+ }}</el-button>
|
|
|
+ <el-drawer
|
|
|
+ :title="$t(`编辑营销产品`)"
|
|
|
+ :visible.sync="dialogFormVisible"
|
|
|
+ :wrapperClosable="false"
|
|
|
+ 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="class">
|
|
|
+ <el-cascader
|
|
|
+ ref="selectdep"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%"
|
|
|
+ :placeholder="$t(form.class || '分类')"
|
|
|
+ v-model="form.class"
|
|
|
+ :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"
|
|
|
+ ></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 productTemplate from "@/WebsiteManagement/marketproductMag/compents/productTemplate";
|
|
|
+import myEditor from "@/components/my-editor/Editor.vue";
|
|
|
+import upload from "../compents/upload";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "edit",
|
|
|
+ components: { productTemplate, myEditor, upload },
|
|
|
+ props: ["data"],
|
|
|
+ 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" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ updated() {
|
|
|
+ if (this.$refs.technicalparam)
|
|
|
+ this.$refs.technicalparam.innerHTML = this.form.technicalparam;
|
|
|
+ if (this.$refs.materialdescription)
|
|
|
+ this.$refs.materialdescription.innerHTML = this.form.materialdescription;
|
|
|
+ if (this.$refs.contentstr)
|
|
|
+ this.$refs.contentstr.innerHTML = this.form.contentstr;
|
|
|
+ try {
|
|
|
+ if (!this.$refs.upload.filelist.length)
|
|
|
+ this.$refs.upload.filelist = this.fileType
|
|
|
+ .fileList(this.data.attinfos)
|
|
|
+ .map((v) => {
|
|
|
+ v.progress = 100;
|
|
|
+ v.type = v.postfix;
|
|
|
+ v.uid = v.attachmentid;
|
|
|
+ return v;
|
|
|
+ });
|
|
|
+ } catch (error) {}
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ oploadIng(e) {
|
|
|
+ this.disabled = e;
|
|
|
+ },
|
|
|
+ async editBtn() {
|
|
|
+ this.queryClass();
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ id: "20240920101403",
|
|
|
+ content: {
|
|
|
+ siteid: JSON.parse(sessionStorage.getItem("active_account")).siteid,
|
|
|
+ sa_fadid: this.data.sa_fadid,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.tool.showMessage(res, () => {});
|
|
|
+ } else {
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+ this.form = res.data;
|
|
|
+ console.log("this.form",this.form)
|
|
|
+ this.form.contentstr = res.data.content;
|
|
|
+ this.form.isonsale = res.data.isonsale == 1 ? "1" : "0";
|
|
|
+ /*this.$refs.technicalparam.innerHTML = res.data.technicalparam;
|
|
|
+ this.$refs.materialdescription.innerHTML = res.data.materialdescription;
|
|
|
+ this.$refs.contentstr.innerHTML = res.data.contentstr;*/
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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.$refs.upload.linksids.length
|
|
|
+ ? await this.$refs.upload.deleteAllTemporaryFiles(
|
|
|
+ this.$refs.upload.linksids
|
|
|
+ )
|
|
|
+ : "";
|
|
|
+ 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"
|
|
|
+ );
|
|
|
+ this.classData = res.data
|
|
|
+ },
|
|
|
+ onClose() {
|
|
|
+ this.loading = false;
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ this.$refs.form.resetFields();
|
|
|
+ this.$refs.technicalparam.html = this.form.technicalparam;
|
|
|
+ this.$refs.materialdescription.html = this.form.materialdescription;
|
|
|
+ this.$refs.contentstr.html = this.form.contentstr;
|
|
|
+ this.$emit("onSuccess");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+};
|
|
|
+</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>
|
970319330@qq.com