暂存

src/WebsiteManagement/marketproductMag/modules/add.vue

@@ -39,6 +39,16 @@
                 </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">
@@ -177,6 +187,13 @@ export default {
       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时 为新增
@@ -189,6 +206,7 @@ export default {
         contentstr: "",
         isonsale: "1",
         classmx: "",
+        langTabs:[]
       },
       rules: {
         itemname: [
@@ -200,21 +218,35 @@ export default {
       },
     };
   },
-  mounted() {},
+  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.form.technicalparam = this.$refs.technicalparam.html;
-        this.form.materialdescription = this.$refs.materialdescription.html;
-        this.form.contentstr = this.$refs.contentstr.html;
+        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] || "";
@@ -223,6 +255,7 @@ export default {
           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",
@@ -243,6 +276,66 @@ 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
+          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",
@@ -258,6 +351,13 @@ export default {
       this.$refs.technicalparam.html = "";
       this.$refs.materialdescription.html = "";
       this.$refs.contentstr.html = "";
+      this.activeLang = '';
+      this.previousLang = '';
+      this.translations = {
+        technicalparam: {},
+        materialdescription: {},
+        contentstr: {},
+      };
       this.$emit("onSuccess");
     },
   },

src/WebsiteManagement/marketproductMag/modules/edit.vue

@@ -36,6 +36,16 @@
                 </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">
@@ -73,9 +83,9 @@
                 </p>
                 <div style="margin-top: 10px; min-height: 200px !important">
                   <myEditor
-                    ref="contentstr"
+                    ref="content"
                     height="360px"
-                    :content="form.contentstr"
+                    :content="form.content"
                     :id="form.sa_fadid"
                   ></myEditor>
                 </div>
@@ -177,6 +187,13 @@ export default {
       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时 为新增
@@ -186,9 +203,9 @@ export default {
         class: "",
         materialdescription: "",
         technicalparam: "",
-        contentstr: "",
         isonsale: "1",
         classmx: "",
+        langTabs: [],
       },
       rules: {
         itemname: [
@@ -205,8 +222,8 @@ export default {
       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;
+    if (this.$refs.content)
+      this.$refs.content.innerHTML = this.form.content;
     try {
       if (!this.$refs.upload.filelist.length)
         this.$refs.upload.filelist = this.fileType
@@ -225,6 +242,7 @@ export default {
     },
     async editBtn() {
       this.queryClass();
+      const langRes = await this.$api.requested({ id: 10026401 });
       const res = await this.$api.requested({
         id: "20240920101403",
         content: {
@@ -237,21 +255,25 @@ export default {
       } 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;*/
+        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.form.technicalparam = this.$refs.technicalparam.html;
-        this.form.materialdescription = this.$refs.materialdescription.html;
-        this.form.contentstr = this.$refs.contentstr.html;
+        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] || "";
@@ -285,6 +307,91 @@ 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",
@@ -312,7 +419,14 @@ export default {
       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.$refs.content.html = this.form.content;
+      this.activeLang = '';
+      this.previousLang = '';
+      this.translations = {
+        technicalparam: {},
+        materialdescription: {},
+        content: {},
+      };
       this.$emit("onSuccess");
     },
   },