暂存

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

@@ -0,0 +1,390 @@
+<template>
+  <div>
+    <el-button
+      size="small"
+      type="primary"
+      @click="addBtn((dialogFormVisible = true))"
+      >{{ $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" v-if="form.langTabs && form.langTabs.length > 0">
+              <el-tabs v-model="activeLang" @tab-click="onLangTabChange" type="card" style="margin-top: 10px;">
+                <el-tab-pane
+                  v-for="tab in form.langTabs"
+                  :key="tab.languagecode"
+                  :label="tab.languagename"
+                  :name="tab.languagecode"
+                ></el-tab-pane>
+              </el-tabs>
+            </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: [],
+      activeLang: '',
+      previousLang: '',
+      translations: {
+        technicalparam: {},
+        materialdescription: {},
+        contentstr: {},
+      },
+      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: "",
+        langTabs:[]
+      },
+      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.$api.requested({
+        id: 10026401,
+      }).then(res=>{
+        this.form.langTabs = res.data
+        this.initTranslations()
+        if (res.data && res.data.length > 0) {
+          this.activeLang = res.data[0].languagecode
+          this.previousLang = res.data[0].languagecode
+        }
+      })
+      this.queryClass();
+    },
+    onSubmit() {
+      this.$refs.form.validate(async (valid) => {
+        if (!valid) return false;
+        this.loading = true;
+        // 确保保存当前激活标签的内容
+        this.saveCurrentTranslations(this.activeLang)
+        const defaultLang = this.form.langTabs[0]?.languagecode || '';
+        this.form.technicalparam = this.translations.technicalparam[defaultLang] || '';
+        this.form.materialdescription = this.translations.materialdescription[defaultLang] || '';
+        this.form.contentstr = this.translations.contentstr[defaultLang] || '';
+        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);
+        await this.saveMultiLangContent(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;
+    },
+    initTranslations() {
+      const fields = ['technicalparam', 'materialdescription', 'contentstr']
+      fields.forEach(field => {
+        this.translations[field] = {}
+        this.form.langTabs.forEach(tab => {
+          this.translations[field][tab.languagecode] = ''
+        })
+      })
+    },
+    saveCurrentTranslations(lang) {
+      const fields = ['technicalparam', 'materialdescription', 'contentstr']
+      const refs = this.$refs
+      fields.forEach(field => {
+        if (refs[field]) {
+          // 直接获取编辑器的 html 属性值
+          const content = refs[field].html || ''
+          console.log(`保存 ${field} [${lang}]:`, content.substring(0, 50))
+          this.translations[field][lang] = content
+        }
+      })
+    },
+    loadCurrentTranslations() {
+      const fields = ['technicalparam', 'materialdescription', 'contentstr']
+      const refs = this.$refs
+      // 直接设置编辑器的 html 属性
+      fields.forEach(field => {
+        const comp = refs[field]
+        if (comp) {
+          const html = this.translations[field][this.activeLang] || ''
+          console.log(`加载 ${field} [${this.activeLang}]:`, html.substring(0, 50))
+          comp.html = html
+        }
+      })
+    },
+    onLangTabChange(tab) {
+      // 立即保存当前语言的内容
+      this.saveCurrentTranslations(this.previousLang)
+      this.previousLang = tab.name
+      // 立即加载新语言的内容
+      this.$nextTick(() => {
+        this.loadCurrentTranslations()
+      })
+    },
+    async saveMultiLangContent(ownerid) {
+      const fields = [
+        { key: 'technicalparam', columnname: 'technicalparam' },
+        { key: 'materialdescription', columnname: 'materialdescription' },
+        { key: 'contentstr', columnname: 'content' },
+      ]
+      const defaultLang = this.form.langTabs[0]?.languagecode || ''
+      for (const field of fields) {
+        for (const tab of this.form.langTabs) {
+          if (tab.languagecode === defaultLang) continue
+          const value = this.translations[field.key][tab.languagecode]
+          if (!value) continue
+          await this.$api.requested({
+            id: 10027001,
+            content: {
+              ownertable: 'sa_fad',
+              ownerid: ownerid,
+              languagecode: tab.languagecode,
+              columnname: field.columnname,
+              value_translate: value,
+            },
+          })
+        }
+      }
+    },
+    async queryClass() {
+      const res = await this.$store.dispatch(
+        "optiontypeselect",
+        "marketproductclass"
+      );
+      this.classData = res.data
+    },
+    onClose() {
+      this.dialogFormVisible = false;
+      this.loading = false;
+      this.$refs.form.resetFields();
+      this.$refs.upload.deleteAllTemporaryFiles();
+      // 直接清空编辑器内容
+      if (this.$refs.technicalparam) this.$refs.technicalparam.html = "";
+      if (this.$refs.materialdescription) this.$refs.materialdescription.html = "";
+      if (this.$refs.contentstr) this.$refs.contentstr.html = "";
+      this.activeLang = '';
+      this.previousLang = '';
+      this.translations = {
+        technicalparam: {},
+        materialdescription: {},
+        contentstr: {},
+      };
+      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>

src/WebsiteManagement/marketproductMag/modules/add.vue

@@ -39,61 +39,101 @@
                 </el-popover>
               </el-form-item>
             </el-col>
-            <el-col :span="24" v-if="form.langTabs && form.langTabs.length > 0">
-              <el-tabs v-model="activeLang" @tab-click="onLangTabChange" type="card" style="margin-top: 10px;">
-                <el-tab-pane
+            <el-col
+              :span="24"
+              v-if="form.langTabs && form.langTabs.length > 0"
+            >
+              <div class="lang-tabs">
+                <span
                   v-for="tab in form.langTabs"
                   :key="tab.languagecode"
-                  :label="tab.languagename"
-                  :name="tab.languagecode"
-                ></el-tab-pane>
-              </el-tabs>
-            </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>
+                  class="lang-tab"
+                  :class="{ active: activeLang === tab.languagecode }"
+                  @click="activeLang = tab.languagecode"
+                >{{ tab.languagename }}</span>
+              </div>
             </el-col>
+            <template v-for="tab in form.langTabs">
+              <el-col
+                :span="24"
+                v-if="activeLang === tab.languagecode"
+                :key="'technicalparam_' + tab.languagecode"
+              >
+                <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_' + tab.languagecode"
+                      height="360px"
+                      :content="langData[tab.languagecode]?.technicalparam || ''"
+                      @update:content="
+                        val =>
+                          onEditorChange(
+                            tab.languagecode,
+                            'technicalparam',
+                            val
+                          )
+                      "
+                      :id="form.sa_fadid"
+                    ></myEditor>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col
+                :span="24"
+                v-if="activeLang === tab.languagecode"
+                :key="'materialdescription_' + tab.languagecode"
+              >
+                <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_' + tab.languagecode"
+                      height="360px"
+                      :content="
+                        langData[tab.languagecode]?.materialdescription || ''
+                      "
+                      @update:content="
+                        val =>
+                          onEditorChange(
+                            tab.languagecode,
+                            'materialdescription',
+                            val
+                          )
+                      "
+                      :id="form.sa_fadid"
+                    ></myEditor>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col
+                :span="24"
+                v-if="activeLang === tab.languagecode"
+                :key="'contentstr_' + tab.languagecode"
+              >
+                <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_' + tab.languagecode"
+                      height="360px"
+                      :content="langData[tab.languagecode]?.contentstr || ''"
+                      @update:content="
+                        val =>
+                          onEditorChange(tab.languagecode, 'contentstr', val)
+                      "
+                      :id="form.sa_fadid"
+                    ></myEditor>
+                  </div>
+                </el-form-item>
+              </el-col>
+            </template>
             <el-col :span="24">
               <el-form-item :label="$t('分类')" prop="classmx">
                 <el-cascader
@@ -187,16 +227,11 @@ export default {
       loading: false,
       disabled: false,
       classData: [],
-      activeLang: '',
-      previousLang: '',
-      translations: {
-        technicalparam: {},
-        materialdescription: {},
-        contentstr: {},
-      },
+      activeLang: "",
+      langData: {},
       form: {
         siteid: JSON.parse(sessionStorage.getItem("active_account")).siteid,
-        sa_fadid: 0, //sa_brandid<=0时 为新增
+        sa_fadid: 0,
         itemid: "",
         itemname: "",
         itemno: "",
@@ -206,7 +241,7 @@ export default {
         contentstr: "",
         isonsale: "1",
         classmx: "",
-        langTabs:[]
+        langTabs: [],
       },
       rules: {
         itemname: [
@@ -217,36 +252,47 @@ export default {
         ],
       },
     };
-  },
-  mounted () {
-      
   },
   methods: {
     oploadIng(e) {
       this.disabled = e;
     },
     addBtn() {
-      this.$api.requested({
-        id: 10026401,
-      }).then(res=>{
-        this.form.langTabs = res.data
-        this.initTranslations()
-        if (res.data && res.data.length > 0) {
-          this.activeLang = res.data[0].languagecode
-          this.previousLang = res.data[0].languagecode
-        }
-      })
+      this.$api
+        .requested({
+          id: 10026401,
+        })
+        .then((res) => {
+          this.form.langTabs = res.data;
+          const langData = {};
+          res.data.forEach((tab) => {
+            langData[tab.languagecode] = {
+              technicalparam: "",
+              materialdescription: "",
+              contentstr: "",
+            };
+          });
+          this.langData = langData;
+          if (res.data && res.data.length > 0) {
+            this.activeLang = res.data[0].languagecode;
+          }
+        });
       this.queryClass();
     },
+    onEditorChange(langCode, field, val) {
+      if (this.langData[langCode]) {
+        this.langData[langCode][field] = val;
+      }
+    },
     onSubmit() {
       this.$refs.form.validate(async (valid) => {
         if (!valid) return false;
         this.loading = true;
-        this.saveCurrentTranslations(this.activeLang);
-        const defaultLang = this.form.langTabs[0]?.languagecode || '';
-        this.form.technicalparam = this.translations.technicalparam[defaultLang] || '';
-        this.form.materialdescription = this.translations.materialdescription[defaultLang] || '';
-        this.form.contentstr = this.translations.contentstr[defaultLang] || '';
+        const defaultLang = this.form.langTabs[0]?.languagecode || "";
+        const defaultData = this.langData[defaultLang] || {};
+        this.form.technicalparam = defaultData.technicalparam || "";
+        this.form.materialdescription = defaultData.materialdescription || "";
+        this.form.contentstr = defaultData.contentstr || "";
         const selectdep = this.$refs.selectdep._data.inputValue.split(" / ");
         this.form.class = selectdep[0] || "";
         this.form.classmx = selectdep[1] || "";
@@ -276,63 +322,30 @@ export default {
       this.form.itemid = data.itemid;
       this.form.itemno = data.itemno;
     },
-    initTranslations() {
-      const fields = ['technicalparam', 'materialdescription', 'contentstr']
-      fields.forEach(field => {
-        this.translations[field] = {}
-        this.form.langTabs.forEach(tab => {
-          this.translations[field][tab.languagecode] = ''
-        })
-      })
-    },
-    saveCurrentTranslations(lang) {
-      const fields = ['technicalparam', 'materialdescription', 'contentstr']
-      const refs = this.$refs
-      fields.forEach(field => {
-        if (refs[field] && refs[field].html !== undefined) {
-          this.translations[field][lang] = refs[field].html
-        }
-      })
-    },
-    loadCurrentTranslations() {
-      const fields = ['technicalparam', 'materialdescription', 'contentstr']
-      const refs = this.$refs
-      this.$nextTick(() => {
-        fields.forEach(field => {
-          const comp = refs[field]
-          if (comp) {
-            comp.html = this.translations[field][this.activeLang] || ''
-          }
-        })
-      })
-    },
-    onLangTabChange(tab) {
-      this.saveCurrentTranslations(this.previousLang)
-      this.previousLang = tab.name
-      this.loadCurrentTranslations()
-    },
     async saveMultiLangContent(ownerid) {
       const fields = [
-        { key: 'technicalparam', columnname: 'technicalparam' },
-        { key: 'materialdescription', columnname: 'materialdescription' },
-        { key: 'contentstr', columnname: 'content' },
-      ]
-      const defaultLang = this.form.langTabs[0]?.languagecode || ''
-      for (const field of fields) {
-        for (const tab of this.form.langTabs) {
-          if (tab.languagecode === defaultLang) continue
-          const value = this.translations[field.key][tab.languagecode]
-          if (!value) continue
+        { key: "technicalparam", columnname: "technicalparam" },
+        { key: "materialdescription", columnname: "materialdescription" },
+        { key: "contentstr", columnname: "content" },
+      ];
+      const defaultLang = this.form.langTabs[0]?.languagecode || "";
+      for (const tab of this.form.langTabs) {
+        if (tab.languagecode === defaultLang) continue;
+        const langContent = this.langData[tab.languagecode];
+        if (!langContent) continue;
+        for (const field of fields) {
+          const value = langContent[field.key];
+          if (!value) continue;
           await this.$api.requested({
             id: 10027001,
             content: {
-              ownertable: 'sa_fad',
+              ownertable: "sa_fad",
               ownerid: ownerid,
               languagecode: tab.languagecode,
               columnname: field.columnname,
               value_translate: value,
             },
-          })
+          });
         }
       }
     },
@@ -341,25 +354,35 @@ export default {
         "optiontypeselect",
         "marketproductclass"
       );
-      this.classData = res.data
+      this.classData = res.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.activeLang = '';
-      this.previousLang = '';
-      this.translations = {
-        technicalparam: {},
-        materialdescription: {},
-        contentstr: {},
-      };
+      this.clearAllEditors();
+      this.activeLang = "";
+      this.langData = {};
       this.$emit("onSuccess");
     },
+    clearAllEditors() {
+      const fields = [
+        "technicalparam",
+        "materialdescription",
+        "contentstr",
+      ];
+      fields.forEach((field) => {
+        const ref = this.$refs[field + "_" + this.activeLang];
+        if (ref) {
+          if (Array.isArray(ref)) {
+            ref.forEach((r) => r.clearContent());
+          } else {
+            ref.clearContent();
+          }
+        }
+      });
+    },
   },
 };
 </script>
@@ -377,4 +400,32 @@ export default {
   margin-top: 3px;
   color: #606266;
 }
+
+.lang-tabs {
+  display: flex;
+  border-bottom: 1px solid #e4e7ed;
+  margin-top: 10px;
+}
+
+.lang-tab {
+  padding: 8px 16px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-bottom: none;
+  margin-bottom: -1px;
+  font-size: 14px;
+  color: #606266;
+  border-radius: 4px 4px 0 0;
+  transition: color 0.15s;
+}
+
+.lang-tab.active {
+  color: #409eff;
+  border-color: #e4e7ed;
+  background: #fff;
+}
+
+.lang-tab:hover {
+  color: #409eff;
+}
 </style>

src/WebsiteManagement/marketproductMag/modules/edit copy.vue

@@ -0,0 +1,451 @@
+<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" v-if="form.langTabs && form.langTabs.length > 0">
+              <el-tabs v-model="activeLang" @tab-click="onLangTabChange" type="card" style="margin-top: 10px;">
+                <el-tab-pane
+                  v-for="tab in form.langTabs"
+                  :key="tab.languagecode"
+                  :label="tab.languagename"
+                  :name="tab.languagecode"
+                ></el-tab-pane>
+              </el-tabs>
+            </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="content"
+                    height="360px"
+                    :content="form.content"
+                    :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(form.class || '分类')"
+                  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 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: [],
+      activeLang: '',
+      previousLang: '',
+      translations: {
+        technicalparam: {},
+        materialdescription: {},
+        content: {},
+      },
+      form: {
+        siteid: JSON.parse(sessionStorage.getItem("active_account")).siteid,
+        sa_fadid: 0, //sa_brandid<=0时 为新增
+        itemid: "",
+        itemname: "",
+        itemno: "",
+        class: "",
+        materialdescription: "",
+        technicalparam: "",
+        isonsale: "1",
+        classmx: "",
+        langTabs: [],
+      },
+      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.content)
+      this.$refs.content.innerHTML = this.form.content;
+    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 langRes = await this.$api.requested({ id: 10026401 });
+      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;
+        this.form.isonsale = res.data.isonsale == 1 ? "1" : "0";
+        this.form.langTabs = langRes.data || [];
+        this.initTranslations();
+        if (this.form.langTabs.length > 0) {
+          this.activeLang = this.form.langTabs[0].languagecode;
+          this.previousLang = this.form.langTabs[0].languagecode;
+        }
+        await this.queryTranslations(this.form.sa_fadid);
+      }
+    },
+    onSubmit() {
+      this.$refs.form.validate(async (valid) => {
+        if (!valid) return false;
+        this.loading = true;
+        this.saveCurrentTranslations(this.activeLang);
+        const defaultLang = this.form.langTabs[0]?.languagecode || '';
+        this.form.technicalparam = this.translations.technicalparam[defaultLang] || '';
+        this.form.materialdescription = this.translations.materialdescription[defaultLang] || '';
+        this.form.content = this.translations.content[defaultLang] || '';
+        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;
+    },
+    initTranslations() {
+      const fields = ['technicalparam', 'materialdescription', 'content']
+      fields.forEach(field => {
+        this.translations[field] = {}
+        this.form.langTabs.forEach(tab => {
+          this.translations[field][tab.languagecode] = ''
+        })
+      })
+    },
+    saveCurrentTranslations(lang) {
+      const fields = ['technicalparam', 'materialdescription', 'content']
+      const refs = this.$refs
+      fields.forEach(field => {
+        if (refs[field] && refs[field].editor) {
+          this.translations[field][lang] = refs[field].editor.getHtml()
+        }
+      })
+    },
+    loadCurrentTranslations() {
+      const fields = ['technicalparam', 'materialdescription', 'content']
+      const refs = this.$refs
+      this.$nextTick(() => {
+        fields.forEach(field => {
+          const comp = refs[field]
+          if (comp && comp.editor) {
+            const html = this.translations[field][this.activeLang] || ''
+            comp.html = html
+          }
+        })
+      })
+    },
+    async onLangTabChange(tab) {
+      this.saveCurrentTranslations(this.previousLang)
+      this.previousLang = tab.name
+      const defaultLang = this.form.langTabs[0]?.languagecode || ''
+      if (tab.name !== defaultLang) {
+        await this.queryTranslationsByLang(this.form.sa_fadid, tab.name)
+      }
+      this.loadCurrentTranslations()
+    },
+    async queryTranslationsByLang(ownerid, lang) {
+      const fields = ['technicalparam', 'materialdescription', 'content']
+      for (const field of fields) {
+        try {
+          const res = await this.$api.requested({
+            id: 10027101,
+            content: {
+              ownertable: 'sa_fad',
+              ownerid: ownerid,
+              languagecode: lang,
+              columnname: field,
+            },
+          })
+          if (res.data && res.data.value_translate !== undefined) {
+            this.translations[field][lang] = res.data.value_translate
+          } else if (res.data && typeof res.data === 'string') {
+            this.translations[field][lang] = res.data
+          }
+        } catch (e) {}
+      }
+    },
+    async queryTranslations(ownerid) {
+      const fields = ['technicalparam', 'materialdescription', 'content']
+      const defaultLang = this.form.langTabs[0]?.languagecode || ''
+      for (const field of fields) {
+        for (const tab of this.form.langTabs) {
+          if (tab.languagecode === defaultLang) continue
+          try {
+            const res = await this.$api.requested({
+              id: 10027101,
+              content: {
+                ownertable: 'sa_fad',
+                ownerid: ownerid,
+                languagecode: tab.languagecode,
+                columnname: field,
+              },
+            })
+            if (res.data && res.data.value_translate !== undefined) {
+              this.translations[field][tab.languagecode] = res.data.value_translate
+            } else if (res.data && typeof res.data === 'string') {
+              this.translations[field][tab.languagecode] = res.data
+            }
+          } catch (e) {}
+        }
+      }
+    },
+    async queryClass() {
+      const res = await this.$store.dispatch(
+        "optiontypeselect",
+        "marketproductclass"
+      );
+      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.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.content.html = this.form.content;
+      this.activeLang = '';
+      this.previousLang = '';
+      this.translations = {
+        technicalparam: {},
+        materialdescription: {},
+        content: {},
+      };
+      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>

src/WebsiteManagement/marketproductMag/modules/edit.vue

@@ -36,61 +36,100 @@
                 </el-popover>
               </el-form-item>
             </el-col>
-            <el-col :span="24" v-if="form.langTabs && form.langTabs.length > 0">
-              <el-tabs v-model="activeLang" @tab-click="onLangTabChange" type="card" style="margin-top: 10px;">
-                <el-tab-pane
+            <el-col
+              :span="24"
+              v-if="form.langTabs && form.langTabs.length > 0"
+            >
+              <div class="lang-tabs">
+                <span
                   v-for="tab in form.langTabs"
                   :key="tab.languagecode"
-                  :label="tab.languagename"
-                  :name="tab.languagecode"
-                ></el-tab-pane>
-              </el-tabs>
-            </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="content"
-                    height="360px"
-                    :content="form.content"
-                    :id="form.sa_fadid"
-                  ></myEditor>
-                </div>
-              </el-form-item>
+                  class="lang-tab"
+                  :class="{ active: activeLang === tab.languagecode }"
+                  @click="activeLang = tab.languagecode"
+                >{{ tab.languagename }}</span>
+              </div>
             </el-col>
+            <template v-for="tab in form.langTabs">
+              <el-col
+                :span="24"
+                v-show="activeLang === tab.languagecode"
+                :key="'technicalparam_' + tab.languagecode"
+              >
+                <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_' + tab.languagecode"
+                      height="360px"
+                      :content="langData[tab.languagecode]?.technicalparam || ''"
+                      @update:content="
+                        val =>
+                          onEditorChange(
+                            tab.languagecode,
+                            'technicalparam',
+                            val
+                          )
+                      "
+                      :id="form.sa_fadid"
+                    ></myEditor>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col
+                :span="24"
+                v-show="activeLang === tab.languagecode"
+                :key="'materialdescription_' + tab.languagecode"
+              >
+                <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_' + tab.languagecode"
+                      height="360px"
+                      :content="
+                        langData[tab.languagecode]?.materialdescription || ''
+                      "
+                      @update:content="
+                        val =>
+                          onEditorChange(
+                            tab.languagecode,
+                            'materialdescription',
+                            val
+                          )
+                      "
+                      :id="form.sa_fadid"
+                    ></myEditor>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col
+                :span="24"
+                v-show="activeLang === tab.languagecode"
+                :key="'content_' + tab.languagecode"
+              >
+                <el-form-item>
+                  <p style="font-size: 14px; margin-top: 10px">
+                    {{ $t("产品概述") }}
+                  </p>
+                  <div style="margin-top: 10px; min-height: 200px !important">
+                    <myEditor
+                      :ref="'content_' + tab.languagecode"
+                      height="360px"
+                      :content="langData[tab.languagecode]?.content || ''"
+                      @update:content="
+                        val => onEditorChange(tab.languagecode, 'content', val)
+                      "
+                      :id="form.sa_fadid"
+                    ></myEditor>
+                  </div>
+                </el-form-item>
+              </el-col>
+            </template>
             <el-col :span="24">
               <el-form-item :label="$t('分类')" prop="classmx">
                 <el-cascader
@@ -187,16 +226,11 @@ export default {
       loading: false,
       disabled: false,
       classData: [],
-      activeLang: '',
-      previousLang: '',
-      translations: {
-        technicalparam: {},
-        materialdescription: {},
-        content: {},
-      },
+      activeLang: "",
+      langData: {},
       form: {
         siteid: JSON.parse(sessionStorage.getItem("active_account")).siteid,
-        sa_fadid: 0, //sa_brandid<=0时 为新增
+        sa_fadid: 0,
         itemid: "",
         itemname: "",
         itemno: "",
@@ -218,12 +252,6 @@ export default {
     };
   },
   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.content)
-      this.$refs.content.innerHTML = this.form.content;
     try {
       if (!this.$refs.upload.filelist.length)
         this.$refs.upload.filelist = this.fileType
@@ -257,23 +285,73 @@ export default {
         this.form = res.data;
         this.form.isonsale = res.data.isonsale == 1 ? "1" : "0";
         this.form.langTabs = langRes.data || [];
-        this.initTranslations();
-        if (this.form.langTabs.length > 0) {
-          this.activeLang = this.form.langTabs[0].languagecode;
-          this.previousLang = this.form.langTabs[0].languagecode;
+
+        const defaultLang =
+          langRes.data && langRes.data[0]
+            ? langRes.data[0].languagecode
+            : "";
+        const langData = {};
+        langRes.data.forEach((tab) => {
+          const isDefault = tab.languagecode === defaultLang;
+          langData[tab.languagecode] = {
+            technicalparam: isDefault ? res.data.technicalparam || "" : "",
+            materialdescription: isDefault
+              ? res.data.materialdescription || ""
+              : "",
+            content: isDefault ? res.data.content || "" : "",
+          };
+        });
+        this.langData = langData;
+
+        if (langRes.data && langRes.data.length > 0) {
+          this.activeLang = defaultLang;
         }
-        await this.queryTranslations(this.form.sa_fadid);
+
+        await this.loadTranslations(this.form.sa_fadid, defaultLang);
+      }
+    },
+    async loadTranslations(ownerid, defaultLang) {
+      const fields = ["technicalparam", "materialdescription", "content"];
+      for (const tab of this.form.langTabs) {
+        if (tab.languagecode === defaultLang) continue;
+        for (const field of fields) {
+          try {
+            const res = await this.$api.requested({
+              id: 10027101,
+              content: {
+                ownertable: "sa_fad",
+                ownerid: ownerid,
+                languagecode: tab.languagecode,
+                columnname: field,
+              },
+            });
+            let value = "";
+            if (res.data && res.data.value_translate !== undefined) {
+              value = res.data.value_translate;
+            } else if (res.data && typeof res.data === "string") {
+              value = res.data;
+            }
+            if (value) {
+              this.langData[tab.languagecode][field] = value;
+            }
+          } catch (e) {}
+        }
+      }
+    },
+    onEditorChange(langCode, field, val) {
+      if (this.langData[langCode]) {
+        this.langData[langCode][field] = val;
       }
     },
     onSubmit() {
       this.$refs.form.validate(async (valid) => {
         if (!valid) return false;
         this.loading = true;
-        this.saveCurrentTranslations(this.activeLang);
-        const defaultLang = this.form.langTabs[0]?.languagecode || '';
-        this.form.technicalparam = this.translations.technicalparam[defaultLang] || '';
-        this.form.materialdescription = this.translations.materialdescription[defaultLang] || '';
-        this.form.content = this.translations.content[defaultLang] || '';
+        const defaultLang = this.form.langTabs[0]?.languagecode || "";
+        const defaultData = this.langData[defaultLang] || {};
+        this.form.technicalparam = defaultData.technicalparam || "";
+        this.form.materialdescription = defaultData.materialdescription || "";
+        this.form.content = defaultData.content || "";
         const selectdep = this.$refs.selectdep._data.inputValue.split(" / ");
         this.form.class = selectdep[0] || "";
         this.form.classmx = selectdep[1] || "";
@@ -307,91 +385,6 @@ export default {
       this.form.itemid = data.itemid;
       this.form.itemno = data.itemno;
     },
-    initTranslations() {
-      const fields = ['technicalparam', 'materialdescription', 'content']
-      fields.forEach(field => {
-        this.translations[field] = {}
-        this.form.langTabs.forEach(tab => {
-          this.translations[field][tab.languagecode] = ''
-        })
-      })
-    },
-    saveCurrentTranslations(lang) {
-      const fields = ['technicalparam', 'materialdescription', 'content']
-      const refs = this.$refs
-      fields.forEach(field => {
-        if (refs[field] && refs[field].html !== undefined) {
-          this.translations[field][lang] = refs[field].html
-        }
-      })
-    },
-    loadCurrentTranslations() {
-      const fields = ['technicalparam', 'materialdescription', 'content']
-      const refs = this.$refs
-      this.$nextTick(() => {
-        fields.forEach(field => {
-          const comp = refs[field]
-          if (comp) {
-            comp.html = this.translations[field][this.activeLang] || ''
-          }
-        })
-      })
-    },
-    async onLangTabChange(tab) {
-      this.saveCurrentTranslations(this.previousLang)
-      this.previousLang = tab.name
-      const defaultLang = this.form.langTabs[0]?.languagecode || ''
-      if (tab.name !== defaultLang) {
-        await this.queryTranslationsByLang(this.form.sa_fadid, tab.name)
-      }
-      this.loadCurrentTranslations()
-    },
-    async queryTranslationsByLang(ownerid, lang) {
-      const fields = ['technicalparam', 'materialdescription', 'content']
-      for (const field of fields) {
-        try {
-          const res = await this.$api.requested({
-            id: 10027101,
-            content: {
-              ownertable: 'sa_fad',
-              ownerid: ownerid,
-              languagecode: lang,
-              columnname: field,
-            },
-          })
-          if (res.data && res.data.value_translate !== undefined) {
-            this.translations[field][lang] = res.data.value_translate
-          } else if (res.data && typeof res.data === 'string') {
-            this.translations[field][lang] = res.data
-          }
-        } catch (e) {}
-      }
-    },
-    async queryTranslations(ownerid) {
-      const fields = ['technicalparam', 'materialdescription', 'content']
-      const defaultLang = this.form.langTabs[0]?.languagecode || ''
-      for (const field of fields) {
-        for (const tab of this.form.langTabs) {
-          if (tab.languagecode === defaultLang) continue
-          try {
-            const res = await this.$api.requested({
-              id: 10027101,
-              content: {
-                ownertable: 'sa_fad',
-                ownerid: ownerid,
-                languagecode: tab.languagecode,
-                columnname: field,
-              },
-            })
-            if (res.data && res.data.value_translate !== undefined) {
-              this.translations[field][tab.languagecode] = res.data.value_translate
-            } else if (res.data && typeof res.data === 'string') {
-              this.translations[field][tab.languagecode] = res.data
-            }
-          } catch (e) {}
-        }
-      }
-    },
     async queryClass() {
       const res = await this.$store.dispatch(
         "optiontypeselect",
@@ -417,18 +410,26 @@ export default {
       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.content.html = this.form.content;
-      this.activeLang = '';
-      this.previousLang = '';
-      this.translations = {
-        technicalparam: {},
-        materialdescription: {},
-        content: {},
-      };
+      this.clearAllEditors();
+      this.activeLang = "";
+      this.langData = {};
       this.$emit("onSuccess");
     },
+    clearAllEditors() {
+      const fields = ["technicalparam", "materialdescription", "content"];
+      (this.form.langTabs || []).forEach((tab) => {
+        fields.forEach((field) => {
+          const ref = this.$refs[field + "_" + tab.languagecode];
+          if (ref) {
+            if (Array.isArray(ref)) {
+              ref.forEach((r) => r.clearContent());
+            } else {
+              ref.clearContent();
+            }
+          }
+        });
+      });
+    },
   },
   mounted() {},
 };
@@ -447,4 +448,32 @@ export default {
   margin-top: 3px;
   color: #606266;
 }
+
+.lang-tabs {
+  display: flex;
+  border-bottom: 1px solid #e4e7ed;
+  margin-top: 10px;
+}
+
+.lang-tab {
+  padding: 8px 16px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-bottom: none;
+  margin-bottom: -1px;
+  font-size: 14px;
+  color: #606266;
+  border-radius: 4px 4px 0 0;
+  transition: color 0.15s;
+}
+
+.lang-tab.active {
+  color: #409eff;
+  border-color: #e4e7ed;
+  background: #fff;
+}
+
+.lang-tab:hover {
+  color: #409eff;
+}
 </style>

src/components/my-editor/Editor.vue

@@ -39,18 +39,54 @@ export default Vue.extend({
               }
             }
           },
-          mode: 'default', // or 'simple'
+          mode: 'default',
         }
     },
     props: ['id','content','disabled','height'],
     watch: {
       disabled (val) {
-        val ? this.editor.disable() : this.editor.enable()
+        if (this.editor) {
+          val ? this.editor.disable() : this.editor.enable()
+        }
+      },
+      content (newVal) {
+        if (this._ignoreChange) return
+        const val = newVal || ''
+        if (this.editor && this.editor.getHtml() !== val) {
+          this._ignoreChange = true
+          try { this.editor.clear() } catch (e) {}
+          this.editor.setHtml(val)
+          this.html = val
+          this.$nextTick(() => { this._ignoreChange = false })
+        } else if (!this.editor) {
+          this.html = val
+        }
+      },
+      html (newVal) {
+        if (this._ignoreChange) return
+        this.$emit('update:content', newVal)
       }
     },
     methods: {
         onCreated(editor) {
-            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+            this.editor = Object.seal(editor)
+            if (this.content) {
+              this.editor.setHtml(this.content)
+              this.html = this.content
+            }
+            this._clearHistory()
+        },
+        _clearHistory() {
+            if (this.editor && this.editor.history) {
+              this.editor.history.undos = []
+              this.editor.history.redos = []
+            }
+        },
+        clearContent () {
+          if (this.editor) {
+            try { this.editor.clear() } catch (e) {}
+            this.html = ''
+          }
         },
         //自定义上传
         update(file,insertFn) {
@@ -115,17 +151,10 @@ export default Vue.extend({
           })
         }
     },
-    mounted() {
-        // 模拟 ajax 请求，异步渲染编辑器
-        setTimeout(() => {
-          this.html = this.content
-          this.disabled ? this.editor.disable() : this.editor.enable()
-        }, 1000)
-    },
     beforeDestroy() {
         const editor = this.editor
         if (editor == null) return
-        editor.destroy() // 组件销毁时，及时销毁编辑器
+        editor.destroy()
     }
 })
 </script>