大屏新增启用、停用功能

packages/bigscreen/designer/components/Add.vue

@@ -12,14 +12,13 @@
                 <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%;"
+                <el-input size="small" :maxlength="200" :rows="5" type="textarea" style="width: 100%;" placeholder="请输入描述" v-model="form.description"></el-input>
-                          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"
+                  v-model="form.status"
-                    active-value="1"
+                  active-value="1"
-                    inactive-value="0">
+                  inactive-value="0">
                 </el-switch>
               </el-form-item>
             </div>
@@ -32,14 +31,23 @@
           </template>
           <template #content>
             <ai-table
-                :tableData="tableData"
+              :tableData="tableData"
-                :col-configs="colConfigs"
+              :col-configs="colConfigs"
-                :total="total"
+              :total="total"
-                style="margin-top: 6px;"
+              style="margin-top: 6px;"
-                :border="true"
+              :border="true"
-                row-key="id"
+              row-key="id"
-                :isShowPagination="false"
+              :isShowPagination="false"
-                @getList="() => {}">
+              @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)">
+                  </el-switch>
+                </template>
+              </el-table-column>
               <el-table-column slot="options" width="160px" fixed="right" label="操作" align="center">
                 <template slot-scope="{ row, column, $index }">
                   <div class="table-options">
@@ -54,14 +62,14 @@
         </ai-card>
       </el-form>
       <Layout
-          v-if="isShowLayout"
+        v-if="isShowLayout"
-          :instance="instance"
+        :instance="instance"
-          :dict="dict"
+        :dict="dict"
-          :params="query"
+        :params="query"
-          @change="onChange"
+        @change="onChange"
-          :urlPrefix="urlPrefix"
+        :urlPrefix="urlPrefix"
-          :theme="config.theme"
+        :theme="config.theme"
-          @close="isShowLayout = false">
+        @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">
@@ -85,194 +93,207 @@
 </template>
 
 <script>
-import Layout from './Layout.vue'
+  import Layout from './Layout.vue'
-import Sortable from 'sortablejs'
+  import Sortable from 'sortablejs'
-import AppGigscreenViewer from "../../viewer/AppGigscreenViewer";
 
-export default {
+  export default {
-  name: 'Add',
+    name: 'Add',
-  props: {
+    props: {
-    instance: Function,
+      instance: Function,
-    dict: Object,
+      dict: Object,
-    urlPrefix: String
+      urlPrefix: String
-  },
-  inject: {
-    home: {default: ''}
-  },
-  components: {AppGigscreenViewer, 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
-              }
-            })
-            this.total = res.data.lsList.length
-
-            this.$nextTick(() => {
-              this.rowDrop()
-            })
-          }
-        }
-      })
     },
-    rowDrop() {
+    inject: {
-      const tbody = document.querySelector('.el-table__body-wrapper tbody')
+      home: {default: ''}
-      const _this = this
+    },
-      Sortable.create(tbody, {
+    components: {
-        onEnd({newIndex, oldIndex}) {
+      Layout
-          const currRow = _this.tableData.splice(oldIndex, 1)[0]
-          _this.tableData.splice(newIndex, 0, currRow)
-        }
-      })
     },
 
-    toViewer(id) {
+    data() {
-      this.$router.push({query: {id}, hash: "#preview"})
+      return {
-    },
+        info: {},
-    onChange(e) {
+        department: [],
-      const ids = this.tableData.map(v => v.id)
+        form: {
-      if (ids.indexOf(e.id) < 0) {
+          name: '',
-        this.tableData.push({
+          relationLsIds: '',
-          title: e.title,
+          relationLsNames: '',
-          id: e.id
+          status: '1',
-        })
+          description: ''
-      } else {
+        },
-        const index = this.tableData.findIndex(v => v.id === e.id)
+        screenId: '',
-        this.$set(this.tableData[index], 'title', e.title)
+        query: {},
-      }
+        total: 0,
-    },
+        colConfigs: [
-
+          {prop: 'title', label: '标题'},
-    add() {
+          {prop: 'id', label: 'ID'}
-      this.query = {
+        ],
+        tableData: [],
+        isShowLayout: false,
         id: '',
-        name: this.form.name
+        dialog: false,
+        custom: {},
+        rules: {
+          dv: [{required: true, message: "请选择 定制大屏"}],
+          title: [{required: true, message: "请输入 大屏标题"}],
+        },
+        config: {
+          backgroundImage: []
+        }
       }
-      this.isShowLayout = true
     },
 
-    toEdit(id, isCustom, form) {
+    created() {
-      if (!isCustom) {
+      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()
+              })
+            }
+          }
+        })
+      },
+
+      onStatusChange (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,
+          id: '',
           name: this.form.name
         }
-
         this.isShowLayout = true
-      } else {
+      },
-        this.dialog = true
-        this.custom = {
-          ...form,
 
+      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
+              }
+            })
+          }
+        })
       }
-    },
-
-    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">