From 6a847bd9918feeeec76e1ef853600bcc72ecfb63 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Mon, 29 Aug 2022 11:37:17 +0800
Subject: [PATCH] BUG 30988

---
 .../bigscreen/designer/components/Add.vue     | 435 +++++++++---------
 1 file changed, 218 insertions(+), 217 deletions(-)

diff --git a/packages/bigscreen/designer/components/Add.vue b/packages/bigscreen/designer/components/Add.vue
index 8ae09c65..a4cda22d 100644
--- a/packages/bigscreen/designer/components/Add.vue
+++ b/packages/bigscreen/designer/components/Add.vue
@@ -12,13 +12,14 @@
                 <el-input size="small" :maxlength="30" placeholder="请输入大屏项目名称" v-model="form.name"></el-input>
               </el-form-item>
               <el-form-item label="描述" style="width: 100%;" prop="description">
-                <el-input size="small" :maxlength="200" :rows="5" type="textarea" style="width: 100%;" placeholder="请输入描述" v-model="form.description"></el-input>
+                <el-input size="small" :maxlength="200" :rows="5" type="textarea" style="width: 100%;" placeholder="请输入描述"
+                          v-model="form.description"></el-input>
               </el-form-item>
               <el-form-item label="是否开启" style="width: 100%;" prop="status">
                 <el-switch
-                  v-model="form.status"
-                  active-value="1"
-                  inactive-value="0">
+                    v-model="form.status"
+                    active-value="1"
+                    inactive-value="0">
                 </el-switch>
               </el-form-item>
             </div>
@@ -31,20 +32,20 @@
           </template>
           <template #content>
             <ai-table
-              :tableData="tableData"
-              :col-configs="colConfigs"
-              :total="total"
-              style="margin-top: 6px;"
-              :border="true"
-              row-key="id"
-              :isShowPagination="false"
-              @getList="() => {}">
+                :tableData="tableData"
+                :col-configs="colConfigs"
+                :total="total"
+                style="margin-top: 6px;"
+                :border="true"
+                row-key="id"
+                :isShowPagination="false"
+                @getList="() => {}">
               <el-table-column slot="options" label="状态" align="center">
                 <template slot-scope="{ row }">
                   <el-switch
-                    v-model="row.status"
-                    active-value="1"
-                    @change="() => onStatusChange(row.id)">
+                      v-model="row.status"
+                      active-value="1"
+                      @change="() => onStatusChange(row.id)">
                   </el-switch>
                 </template>
               </el-table-column>
@@ -62,14 +63,14 @@
         </ai-card>
       </el-form>
       <Layout
-        v-if="isShowLayout"
-        :instance="instance"
-        :dict="dict"
-        :params="query"
-        @change="onChange"
-        :urlPrefix="urlPrefix"
-        :theme="config.theme"
-        @close="isShowLayout = false">
+          v-if="isShowLayout"
+          :instance="instance"
+          :dict="dict"
+          :params="query"
+          @change="onChange"
+          :urlPrefix="urlPrefix"
+          :theme="config.theme"
+          @close="isShowLayout = false">
       </Layout>
       <ai-dialog :visible.sync="dialog" title="定制大屏" @closed="custom={}" @onConfirm="handleCustomizedDV">
         <el-form ref="CustomDVFrom" size="small" :model="custom" :rules="rules" label-width="80px">
@@ -93,207 +94,207 @@
 </template>
 
 <script>
-  import Layout from './Layout.vue'
-  import Sortable from 'sortablejs'
+import Layout from './Layout.vue'
+import Sortable from 'sortablejs'
 
-  export default {
-    name: 'Add',
-    props: {
-      instance: Function,
-      dict: Object,
-      urlPrefix: String
-    },
-    inject: {
-      home: {default: ''}
-    },
-    components: {
-      Layout
-    },
+export default {
+  name: 'Add',
+  props: {
+    instance: Function,
+    dict: Object,
+    urlPrefix: String
+  },
+  inject: {
+    home: {default: ''}
+  },
+  components: {
+    Layout
+  },
 
-    data() {
-      return {
-        info: {},
-        department: [],
-        form: {
-          name: '',
-          relationLsIds: '',
-          relationLsNames: '',
-          status: '1',
-          description: ''
-        },
-        screenId: '',
-        query: {},
-        total: 0,
-        colConfigs: [
-          {prop: 'title', label: '标题'},
-          {prop: 'id', label: 'ID'}
-        ],
-        tableData: [],
-        isShowLayout: false,
-        id: '',
-        dialog: false,
-        custom: {},
-        rules: {
-          dv: [{required: true, message: "请选择 定制大屏"}],
-          title: [{required: true, message: "请输入 大屏标题"}],
-        },
-        config: {
-          backgroundImage: []
-        }
-      }
-    },
-
-    created() {
-      this.dict.load('customizedDVs')
-      this.getInfo()
-    },
-
-
-    methods: {
-      getInfo() {
-        let {id} = this.$route.query
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenProjectDetailById?id=${id}`).then(res => {
-          if (res?.data) {
-            this.form = {
-              ...res.data
-            }
-            if (res.data.relationLsIds) {
-              this.tableData = res.data.lsList.map(v => {
-                let conf = JSON.parse(v.config || '') || {}
-                return {
-                  id: v.id,
-                  title: v.title,
-                  dv: conf.custom || '',
-                  meta: JSON.stringify(conf.meta),
-                  isCustom: !!conf.custom,
-                  status: v.status
-                }
-              })
-              this.total = res.data.lsList.length
-
-              this.$nextTick(() => {
-                this.rowDrop()
-              })
-            }
-          }
-        })
+  data() {
+    return {
+      info: {},
+      department: [],
+      form: {
+        name: '',
+        relationLsIds: '',
+        relationLsNames: '',
+        status: '1',
+        description: ''
       },
-
-      onStatusChange (id) {
-        this.instance.post(`${this.urlPrefix}/appdiylargescreen/enableLargeScreen?id=${id}`).then(res => {
-          if (res.code === 0) {
-            this.getInfo()
-            this.$message.success('操作成功')
-          }
-        })
+      screenId: '',
+      query: {},
+      total: 0,
+      colConfigs: [
+        {prop: 'title', label: '标题'},
+        {prop: 'id', label: 'ID'}
+      ],
+      tableData: [],
+      isShowLayout: false,
+      id: '',
+      dialog: false,
+      custom: {},
+      rules: {
+        dv: [{required: true, message: "请选择 定制大屏"}],
+        title: [{required: true, message: "请输入 大屏标题"}],
       },
-
-      rowDrop() {
-        const tbody = document.querySelector('.el-table__body-wrapper tbody')
-        const _this = this
-        Sortable.create(tbody, {
-          onEnd({newIndex, oldIndex}) {
-            const currRow = _this.tableData.splice(oldIndex, 1)[0]
-            _this.tableData.splice(newIndex, 0, currRow)
-          }
-        })
-      },
-
-      toViewer(id) {
-        this.$router.push({query: {id}, hash: "#preview"})
-      },
-      onChange(e) {
-        const ids = this.tableData.map(v => v.id)
-        if (ids.indexOf(e.id) < 0) {
-          this.tableData.push({
-            title: e.title,
-            id: e.id
-          })
-        } else {
-          const index = this.tableData.findIndex(v => v.id === e.id)
-          this.$set(this.tableData[index], 'title', e.title)
-        }
-      },
-
-      add() {
-        this.query = {
-          id: '',
-          name: this.form.name
-        }
-        this.isShowLayout = true
-      },
-
-      toEdit(id, isCustom, form) {
-        if (!isCustom) {
-          this.query = {
-            id,
-            name: this.form.name
-          }
-
-          this.isShowLayout = true
-        } else {
-          this.dialog = true
-          this.custom = {
-            ...form,
-
-          }
-        }
-      },
-
-      remove(index) {
-        this.tableData.splice(index, 1)
-      },
-
-      confirm() {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            const ids = this.tableData.map(v => v.id).join(',')
-            const names = this.tableData.map(v => v.name).join(',')
-            this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreenProject`, {
-              ...this.form,
-              relationLsIds: ids,
-              relationLsNames: names
-            }).then(res => {
-              if (res.code == 0) {
-                this.$message.success('提交成功')
-
-                this.home && this.home.refreshDvOptions && this.home.refreshDvOptions()
-                setTimeout(() => {
-                  this.cancel()
-                }, 600)
-              }
-            })
-          }
-        })
-      },
-
-      cancel() {
-        this.$router.push({})
-      },
-
-      handleCustomizedDV() {
-        this.$refs.CustomDVFrom.validate(v => {
-          if (v) {
-            this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
-              config: JSON.stringify({
-                custom: this.custom.dv,
-                meta: JSON.parse(this.custom.meta?.replace(/\\n/g, '') || null)
-              }),
-              status: 1,
-              id: this.custom.id,
-              title: this.custom.title,
-            }).then(res => {
-              if (res?.code == 0 && res?.data) {
-                this.$message.success('保存成功')
-                this.onChange(res.data)
-                this.dialog = false
-              }
-            })
-          }
-        })
+      config: {
+        backgroundImage: []
       }
     }
+  },
+
+  created() {
+    this.dict.load('customizedDVs')
+    this.getInfo()
+  },
+
+
+  methods: {
+    getInfo() {
+      let {id} = this.$route.query
+      id && this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenProjectDetailById?id=${id}`).then(res => {
+        if (res?.data) {
+          this.form = {
+            ...res.data
+          }
+          if (res.data.relationLsIds) {
+            this.tableData = res.data.lsList.map(v => {
+              let conf = JSON.parse(v.config || '') || {}
+              return {
+                id: v.id,
+                title: v.title,
+                dv: conf.custom || '',
+                meta: JSON.stringify(conf.meta),
+                isCustom: !!conf.custom,
+                status: v.status
+              }
+            })
+            this.total = res.data.lsList.length
+
+            this.$nextTick(() => {
+              this.rowDrop()
+            })
+          }
+        }
+      })
+    },
+
+    onStatusChange(id) {
+      id && this.instance.post(`${this.urlPrefix}/appdiylargescreen/enableLargeScreen?id=${id}`).then(res => {
+        if (res.code === 0) {
+          this.getInfo()
+          this.$message.success('操作成功')
+        }
+      })
+    },
+
+    rowDrop() {
+      const tbody = document.querySelector('.el-table__body-wrapper tbody')
+      const _this = this
+      Sortable.create(tbody, {
+        onEnd({newIndex, oldIndex}) {
+          const currRow = _this.tableData.splice(oldIndex, 1)[0]
+          _this.tableData.splice(newIndex, 0, currRow)
+        }
+      })
+    },
+
+    toViewer(id) {
+      this.$router.push({query: {id}, hash: "#preview"})
+    },
+    onChange(e) {
+      const ids = this.tableData.map(v => v.id)
+      if (ids.indexOf(e.id) < 0) {
+        this.tableData.push({
+          title: e.title,
+          id: e.id
+        })
+      } else {
+        const index = this.tableData.findIndex(v => v.id === e.id)
+        this.$set(this.tableData[index], 'title', e.title)
+      }
+    },
+
+    add() {
+      this.query = {
+        id: '',
+        name: this.form.name
+      }
+      this.isShowLayout = true
+    },
+
+    toEdit(id, isCustom, form) {
+      if (!isCustom) {
+        this.query = {
+          id,
+          name: this.form.name
+        }
+
+        this.isShowLayout = true
+      } else {
+        this.dialog = true
+        this.custom = {
+          ...form,
+
+        }
+      }
+    },
+
+    remove(index) {
+      this.tableData.splice(index, 1)
+    },
+
+    confirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          const ids = this.tableData.map(v => v.id).join(',')
+          const names = this.tableData.map(v => v.name).join(',')
+          this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreenProject`, {
+            ...this.form,
+            relationLsIds: ids,
+            relationLsNames: names
+          }).then(res => {
+            if (res.code == 0) {
+              this.$message.success('提交成功')
+
+              this.home && this.home.refreshDvOptions && this.home.refreshDvOptions()
+              setTimeout(() => {
+                this.cancel()
+              }, 600)
+            }
+          })
+        }
+      })
+    },
+
+    cancel() {
+      this.$router.push({})
+    },
+
+    handleCustomizedDV() {
+      this.$refs.CustomDVFrom.validate(v => {
+        if (v) {
+          this.instance.post(`${this.urlPrefix}/appdiylargescreen/addOrUpdateLargeScreen`, {
+            config: JSON.stringify({
+              custom: this.custom.dv,
+              meta: JSON.parse(this.custom.meta?.replace(/\\n/g, '') || null)
+            }),
+            status: 1,
+            id: this.custom.id,
+            title: this.custom.title,
+          }).then(res => {
+            if (res?.code == 0 && res?.data) {
+              this.$message.success('保存成功')
+              this.onChange(res.data)
+              this.dialog = false
+            }
+          })
+        }
+      })
+    }
   }
+}
 </script>
 
 <style scoped lang="scss">