[1078] 合并新UI

web/src/views/jtDevice/channel/edit.vue

@@ -1,94 +1,89 @@
 <template>
-  <div id="channelList" style="width: 100%">
+  <div id="channelEdit" style="width: 100%; height: 100%">
     <div class="page-header">
       <div class="page-title">
-        <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
-        <el-divider direction="vertical"></el-divider>
-        编辑推流信息
-      </div>
-      <div class="page-header-btn">
-        <div style="display: inline;">
-          <el-button icon="el-icon-close" size="mini" style="font-size: 20px; color: #000;" type="text" @click="close" ></el-button>
-        </div>
+        <el-page-header content="编辑推流信息" @back="close" />
       </div>
     </div>
-    <el-tabs tab-position="left">
-      <el-tab-pane label="推流信息编辑" style="background-color: #FFFFFF; padding: 1rem">
-        <el-form ref="form" :rules="rules" :model="jtChannel" label-width="240px" style="display: grid; grid-template-columns: 1fr 1fr 1fr ">
+    <el-tabs tab-position="left" style="padding: 1rem; height: calc(100% - 24px)">
+      <el-tab-pane label="部标通道编辑" style="background-color: #FFFFFF;">
+        <el-form ref="form" :rules="rules" :model="jtChannel" label-width="60px" style="width: 40rem; margin: 0 auto">
           <el-form-item label="编号" prop="channelId">
-            <el-input v-model="jtChannel.channelId" clearable></el-input>
+            <el-input v-model="jtChannel.channelId" clearable />
           </el-form-item>
           <el-form-item label="名称" prop="name">
-            <el-input v-model="jtChannel.name" clearable></el-input>
+            <el-input v-model="jtChannel.name" clearable />
           </el-form-item>
-        </el-form>
-        <el-form style="text-align: right">
-          <el-form-item >
+          <el-form-item style="text-align: right">
             <el-button type="primary" @click="onSubmit">保存</el-button>
             <el-button @click="close">取消</el-button>
           </el-form-item>
         </el-form>
+
       </el-tab-pane>
-      <el-tab-pane label="国标通道配置" v-if="jtChannel.id">
-        <CommonChannelEdit ref="commonChannelEdit" :dataForm="jtChannel" :cancel="close"></CommonChannelEdit>
+      <el-tab-pane :disabled="!jtChannel.id" label="国标通道配置">
+        <CommonChannelEdit ref="commonChannelEdit" :data-form="jtChannel" :cancel="close" />
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script>
-import CommonChannelEdit from './common/CommonChannelEdit'
+import CommonChannelEdit from '../../common/CommonChannelEdit'
 
 export default {
-  name: 'channelList',
-  props: [ 'jtChannel', 'closeEdit'],
+  name: 'ChannelEdit',
   components: {
     CommonChannelEdit
   },
+  props: ['jtChannel', 'closeEdit'],
   data() {
     return {
       version: 3,
       rules: {
-        deviceId: [{ required: true, message: "请输入设备编号", trigger: "blur" }]
+        deviceId: [{ required: true, message: '请输入设备编号', trigger: 'blur' }]
       },
-      winHeight: window.innerHeight - 200,
       isLoading: false,
-      loadSnap: {},
-    };
+      loadSnap: {}
+    }
   },
 
   mounted() {},
   methods: {
-    onSubmit: function () {
+    onSubmit: function() {
       console.log(this.jtChannel)
-      let isEdit = typeof (this.jtChannel.id) !== "undefined"
-      this.$axios({
-        method: 'post',
-        url:`/api/jt1078/terminal/channel/${isEdit?'update':'add'}/`,
-        params: this.jtChannel
-      }).then((res) => {
-        console.log(res.data)
-        if (res.data.code === 0) {
-          this.$message({
-            showClose: true,
-            message: "保存成功",
-            type: "success",
-          });
-          this.jtChannel = res.data.data
-        }else {
-          this.$message({
-            showClose: true,
-            message: res.data.msg,
-            type: "error",
-          });
-        }
-      }).catch(function (error) {
-        console.log(error);
-      });
+      const isEdit = typeof (this.jtChannel.id) !== 'undefined'
+      if (isEdit) {
+        this.$store.dispatch('jtDevice/updateChannel')
+          .then(data => {
+            this.$message({
+              showClose: true,
+              message: '保存成功',
+              type: 'success'
+            })
+            this.jtChannel = data
+          })
+          .catch(function(error) {
+            console.log(error)
+          })
+      } else {
+        this.$store.dispatch('jtDevice/addChannel')
+          .then(data => {
+            this.$message({
+              showClose: true,
+              message: '保存成功',
+              type: 'success'
+            })
+            this.jtChannel = data
+          })
+          .catch(function(error) {
+            console.log(error)
+          })
+      }
     },
-    close: function () {
+    close: function() {
       this.closeEdit()
-    },
+    }
   }
-};
+}
 </script>