cptbat UI改造

src/views/Business/Cptbat/Fpanel.vue

 <template>
-  <div class="eibs-tab">
-    <c-col :span="9">
-      <c-istream-table :list="model.filstm.rows||[]" :columns="stmData.columns" :showButtonFlg="true"
-        @chooseRowEvent="rowcli">
-      </c-istream-table>
-    </c-col>
-
-    <c-col :span="9" :offset="1">
+  <div class="eibs">
+    <!-- =================左边============== -->
+    <c-col :span="12" style="padding-right: 20px">
       <c-col :span="24">
         <el-form-item label="操作选择" prop="opetye">
           <c-select v-model="model.opetye" style="width: 100%">
-            <el-option v-for="item in opetye" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            <el-option
+              v-for="item in opetye"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
           </c-select>
         </el-form-item>
       </c-col>
+
       <c-col :span="24">
         <el-form-item label="本地文件路径" prop="filpth">
-          <c-input v-model="model.filpth" style="width: 100%" placeholder="请输入本地文件路径" disabled></c-input>
+          <c-input
+            v-model="model.filpth"
+            style="width: 100%"
+            placeholder="请输入本地文件路径"
+            disabled
+          ></c-input>
         </el-form-item>
       </c-col>
+
       <c-col :span="24">
         <el-form-item label="上传文件名" prop="newnam">
-          <c-input v-model="model.newnam" style="width: 100%" :disabled="model.opetye !== '1'"></c-input>
+          <c-input
+            v-model="model.newnam"
+            style="width: 100%"
+            :disabled="model.opetye !== '1'"
+          ></c-input>
         </el-form-item>
       </c-col>
+
       <c-col :span="24">
-        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注意：上传文件若包含表头系统将无法解析</span>
+        <el-form-item
+          label="注意：上传文件若包含表头系统将无法解析"
+          label-width="300px"
+        ></el-form-item>
       </c-col>
+
       <c-col :span="24">
-        <el-form-item label="删除首行上传">
-          <c-checkbox v-model="model.flg" :disabled="model.opetye !== '1'"></c-checkbox>
+        <el-form-item label="删除首行上传" class="checkbox-left">
+          <c-checkbox
+            v-model="model.flg"
+            :disabled="model.opetye !== '1'"
+          ></c-checkbox>
         </el-form-item>
       </c-col>
+
       <c-col :span="24">
         <el-form-item label="解析文件名" prop="opefil">
           <c-input v-model="model.opefil" disabled></c-input>
@@ -39,24 +59,61 @@
       </c-col>
     </c-col>
 
-    <c-col :span="4" :offset="1">
+    <c-col :span="12" style="padding-left: 20px">
       <c-col :span="24">
-        <c-button type="primary" :disabled="!(this.flag && model.opetye == '1')" @click="onOpnfil">文件预览</c-button>
+        <el-form-item>
+          <c-button
+            type="primary"
+            :disabled="!(this.flag && model.opetye == '1')"
+            @click="onOpnfil"
+            >文件预览</c-button
+          >
+        </el-form-item>
       </c-col>
-      <c-col><br /></c-col>
+
       <c-col :span="24">
-        <c-button type="primary" :disabled="!(this.flag && model.opetye == '1')" @click="onUpload">文件上传</c-button>
+        <el-form-item>
+        <c-button
+          type="primary"
+          :disabled="!(this.flag && model.opetye == '1')"
+          @click="onUpload"
+          >文件上传</c-button
+        ></el-form-item>
       </c-col>
-      <c-col><br /></c-col>
+     
       <c-col :span="24">
-        <c-button type="primary" :disabled="!(this.flag && model.opetye =='2')" @click="onReadfil">文件解析</c-button>
+        <el-form-item>
+        <c-button
+          type="primary"
+          :disabled="!(this.flag && model.opetye == '2')"
+          @click="onReadfil"
+          >文件解析</c-button
+        ></el-form-item>
       </c-col>
-      <c-col><br /></c-col>
+      
       <c-col :span="24">
-        <c-button type="primary" :disabled="!(this.flag && (model.opetye == '1'||model.opetye == '2'))" @click="onDel">
-          文件删除</c-button>
+        <el-form-item>
+        <c-button
+          type="primary"
+          :disabled="
+            !(this.flag && (model.opetye == '1' || model.opetye == '2'))
+          "
+          @click="onDel"
+        >
+          文件删除</c-button
+        ></el-form-item>
       </c-col>
     </c-col>
+
+    <c-col :span="24">
+      <c-istream-table
+        :list="model.filstm.rows || []"
+        :columns="stmData.columns"
+        :showButtonFlg="true"
+        @chooseRowEvent="rowcli"
+      >
+      </c-istream-table>
+    </c-col>
   </div>
 </template>
 <script>
@@ -78,58 +135,46 @@ export default {
         { label: "已解析文件", value: "3" },
       ],
       stmData: {
-        columns: [
-          '0 1 "批量文件列表" 500',
-        ],
+        columns: ['0 1 "批量文件列表" '],
         data: [],
       },
-
-
     };
   },
   methods: {
     ...Event,
-
   },
   watch: {
     "model.opetye": {
       immediate: true,
       async handler(val, oldVal) {
-        if (this.model.opetye == '1') {
-          let rtnmsg = await this.executeRule("opetye")
+        if (this.model.opetye == "1") {
+          let rtnmsg = await this.executeRule("opetye");
           if (rtnmsg.respCode == SUCCESS) {
             //TODO 处理数据逻辑
-
-          }
-          else {
-            this.$notify.error({ title: '错误', message: '服务请求失败！' });
+          } else {
+            this.$notify.error({ title: "错误", message: "服务请求失败！" });
           }
-        }
-        else if (this.model.opetye == '2') {
-          let rtnmsg = await this.executeRule("opetye")
+        } else if (this.model.opetye == "2") {
+          let rtnmsg = await this.executeRule("opetye");
           if (rtnmsg.respCode == SUCCESS) {
             //TODO 处理数据逻辑
-
-          }
-          else {
-            this.$notify.error({ title: '错误', message: '服务请求失败！' });
+          } else {
+            this.$notify.error({ title: "错误", message: "服务请求失败！" });
           }
         }
-        if (this.model.opetye == '3') {
-          let rtnmsg = await this.executeRule("opetye")
+        if (this.model.opetye == "3") {
+          let rtnmsg = await this.executeRule("opetye");
           if (rtnmsg.respCode == SUCCESS) {
             //TODO 处理数据逻辑
-          }
-          else {
-            this.$notify.error({ title: '错误', message: '服务请求失败！' });
+          } else {
+            this.$notify.error({ title: "错误", message: "服务请求失败！" });
           }
         }
       },
     },
   },
-  created: function () { },
+  created: function () {},
 };
 </script>
 <style>
-
 </style>

src/views/Business/Cptbat/index.vue

 <template>
-    <div class="eContainer">
-        <el-form :model="model" :rules="rules" ref="modelForm" label-width="120px" label-position="right" size="small"
-            :validate-on-rule-change="false">
-            <c-tabs v-model="tabVal" ref="elment" type="card" @tab-click="myTabClick">
-                <!--cptbat PD000001 主界面 -->
-                <el-tab-pane label="主界面" name="fpanel">
-                    <m-fpanel :model="model" :codes="codes" />
-                </el-tab-pane>
-            </c-tabs>
-        </el-form>
-    </div>
+  <div class="eContainer">
+    <c-page title="批量汇款">
+      <el-form
+        :model="model"
+        :rules="rules"
+        ref="modelForm"
+        label-width="120px"
+        label-position="right"
+        size="small"
+        :validate-on-rule-change="false"
+      >
+        <c-tabs
+          v-model="tabVal"
+          ref="elment"
+          type="card"
+          @tab-click="myTabClick"
+        >
+          <!--cptbat PD000001 主界面 -->
+          <el-tab-pane label="主界面" name="fpanel">
+            <m-fpanel :model="model" :codes="codes" />
+          </el-tab-pane>
+        </c-tabs>
+      </el-form>
+    </c-page>
+  </div>
 </template>
 <script>
-import Api from "~/service/Api"
-import CodeTable from "~/config/CodeTable"
-import Cptbat from "~/model/Cptbat"
-import commonProcess from "~/mixin/commonProcess"
-import Check from "~/model/Cptbat/Check"
-import Default from "~/model/Cptbat/Default"
-import Pattern from "~/model/Cptbat/Pattern"
-
-import Fpanel from "./Fpanel"
+import Api from "~/service/Api";
+import CodeTable from "~/config/CodeTable";
+import Cptbat from "~/model/Cptbat";
+import commonProcess from "~/mixin/commonProcess";
+import Check from "~/model/Cptbat/Check";
+import Default from "~/model/Cptbat/Default";
+import Pattern from "~/model/Cptbat/Pattern";
 
+import Fpanel from "./Fpanel";
 
 export default {
-    name: "Cptbat",
-    components: {
-        "m-fpanel": Fpanel,
-    },
-    provide() {
-        return {
-            root: this
-        }
-    },
-    mixins: [commonProcess],    // 里面包含了Default、Check等的公共处理
-    data() {
-        return {
-            tabVal: "fpanel",
-            trnName: "cptbat",
-            trnType: "",
-            model: new Cptbat().data,
-            checkRules: Check,
-            defaultRules: Default,
-            pattern: Pattern,
-            rules: null,
-            codes: {
-            },
-        }
+  name: "Cptbat",
+  components: {
+    "m-fpanel": Fpanel,
+  },
+  provide() {
+    return {
+      root: this,
+    };
+  },
+  mixins: [commonProcess], // 里面包含了Default、Check等的公共处理
+  data() {
+    return {
+      tabVal: "fpanel",
+      trnName: "cptbat",
+      trnType: "",
+      model: new Cptbat().data,
+      checkRules: Check,
+      defaultRules: Default,
+      pattern: Pattern,
+      rules: null,
+      codes: {},
+    };
+  },
+  methods: {
+    myTabClick(tab) {
+      this.tabClick(tab);
+      /**
+       *  do it yourself
+       **/
     },
-    methods: {
-        myTabClick(tab) {
-            this.tabClick(tab)
-            /**
-            *  do it yourself
-            **/
-        }
-    },
-    created: async function () {
-        console.log("进入cptbat交易");
-        let rtnmsg = await this.init({})
-        if (rtnmsg.respCode == SUCCESS) {
-            this.updateModel(rtnmsg.data)
-            //TODO 处理数据逻辑
-
-        }
-        else {
-            this.$notify.error({ title: '错误', message: '服务请求失败！' });
-        }
+  },
+  created: async function () {
+    console.log("进入cptbat交易");
+    let rtnmsg = await this.init({});
+    if (rtnmsg.respCode == SUCCESS) {
+      this.updateModel(rtnmsg.data);
+      //TODO 处理数据逻辑
+    } else {
+      this.$notify.error({ title: "错误", message: "服务请求失败！" });
     }
-}
+  },
+};
 </script>
 <style>
-
 </style>