style:申请业务规则

 import filter from '@/utils/filter.js'
+import store from '@/store/index.js'
 let vm = null
 
 const sendThis = (_this) => {
@@ -8,7 +9,7 @@ class data extends filter {
   constructor() {
     super()
   }
-  djqxCol() {
+  djqxCol () {
     return [
       {
         width: '60',
@@ -104,7 +105,7 @@ class data extends filter {
     ]
   }
 
-  clxxCol() {
+  clxxCol () {
     return [
       {
         width: '60',
@@ -167,7 +168,7 @@ class data extends filter {
             <el-select value={scope.row[scope.column.property]}
               onChange={(val) => { scope.row[scope.column.property] = val }} clearable>
               {
-                vm.dictData['A40'].map(option => {
+                store.getters.dictData['A40'].map(option => {
                   return (
                     <el-option label={option.dname} value={option.dcode}></el-option>
                   )

@@ -68,8 +68,8 @@
           </el-col>
           <el-col :span="1">
             <el-upload ref="upload" :action="imgUploadUrl" :limit="1" accept=".xls, .xlsx" :show-file-list="false"
-              :disabled="requested" :file-list="fileList" :before-upload="uploadRecord" :on-success="handleSuccess">
-              <el-button type="primary" icon="el-icon-upload" :loading="requested">上传材料</el-button>
+              :before-upload="uploadRecord" :on-success="handleSuccess">
+              <el-button type="primary" icon="el-icon-upload">上传材料</el-button>
             </el-upload>
           </el-col>
         </el-row>
@@ -128,209 +128,227 @@
   </div>
 </template>
 <script>
-import { mapGetters } from "vuex";
-import { upward, down } from "@/utils/operation";
-import { getDjlxInfo, getSqdjywDetail, saveSqdjyw } from "@/api/system.js";
-import { datas, sendThis } from "./sqywDetail";
-export default {
-  name: "componentDialog",
-  props: {
-    formData: {
-      type: Object,
-      default: () => { }
-    }
-  },
-  data () {
-    return {
-      tn: 0,
-      n: 0,
-      djlxList: [],
-      title: "",
-      activeName: "1",
-      form: {},
-      djqxCol: datas.djqxCol(),
-      clxxCol: datas.clxxCol(),
-    };
-  },
-  computed: {
-    ...mapGetters(["dictData"]),
-  },
-  mounted () {
-    sendThis(this)
-    this.init()
-  },
-  methods: {
-    //页面初始化
-    init () {
-      this.tn = 0;
-      getDjlxInfo(this.formData.bsmSqyw).then((res) => {
-        let { result } = res;
-        this.djlxList = result ? result : [];
-        if (this.djlxList.length > 0) {
-          this.getDetail(this.djlxList[0].bsmSqyw);
-        } else {
-          this.getDetail(this.formData.bsmSqyw);
-        }
-      })
+  import { uploadUrl } from '@/api/file'
+  import { upward, down } from "@/utils/operation";
+  import { getDjlxInfo, getSqdjywDetail, saveSqdjyw } from "@/api/system.js";
+  import { datas, sendThis } from "./sqywDetail";
+  export default {
+    name: "componentDialog",
+    props: {
+      formData: {
+        type: Object,
+        default: () => { }
+      }
+    },
+    data () {
+      return {
+        tn: 0,
+        n: 0,
+        djlxList: [],
+        options: [],
+        imgUploadUrl: uploadUrl(),
+        title: "",
+        activeName: "1",
+        form: {
+          ywDetail: {}
+        },
+        djqxCol: datas.djqxCol(),
+        clxxCol: datas.clxxCol(),
+      };
     },
-    //tab选项卡事件
-    handleTitleSelct (obj, index) {
-      this.n = 0;
-      this.tn = index;
-      this.getDetail(this.djlxList[index].bsmSqyw);
+    mounted () {
+      sendThis(this)
+      this.init()
     },
-    //获取业务具体明细内容
-    getDetail (bsmSqyw) {
-      getSqdjywDetail(bsmSqyw).then((res) => {
-        if (res.code === 200) {
-          this.form = res.result;
-          console.log(this.form, 'this.formthis.formthis.form');
+    methods: {
+      //页面初始化
+      init () {
+        this.tn = 0;
+        getDjlxInfo(this.formData.bsmSqyw).then((res) => {
+          let { result } = res;
+          this.djlxList = result ? result : [];
+          if (this.djlxList.length > 0) {
+            this.getDetail(this.djlxList[0].bsmSqyw);
+          } else {
+            this.getDetail(this.formData.bsmSqyw);
+          }
+        })
+      },
+      uploadRecord (file) {
+        this.requested = true
+        this.files = file;
+        const extension = file.name.split('.')[1] === 'xls'
+        const extension2 = file.name.split('.')[1] === 'xlsx'
+        const isLt5M = file.size / 1024 / 1024 < 5
+        if (!extension && !extension2) {
+          this.$message.warning('上传模板只能是 xls、xlsx格式!')
+          this.requested = false
+        }
+        if (!isLt5M) {
+          this.$message.warning('上传模板大小不能超过 5MB!')
+          this.requested = false
+        }
+        return (extension || extension2) && isLt5M
+      },
+      handleSuccess () { },
+      //tab选项卡事件
+      handleTitleSelct (obj, index) {
+        this.n = 0;
+        this.tn = index;
+        this.getDetail(this.djlxList[index].bsmSqyw);
+      },
+      //获取业务具体明细内容
+      getDetail (bsmSqyw) {
+        getSqdjywDetail(bsmSqyw).then((res) => {
+          if (res.code === 200) {
+            this.form = res.result;
+            console.log(this.form, 'this.formthis.formthis.form');
+          } else {
+            this.$alert(res.message);
+          }
+        });
+      },
+      //提交保存数据
+      submit () {
+        let that = this;
+        saveSqdjyw(this.form).then((res) => {
+          if (res.code == 200) {
+            that.$message({
+              message: "修改成功",
+              type: "success",
+            });
+            this.$popupCacel()
+          }
+        });
+      },
+      // 上移下移
+      moveUpward (index, row, type) {
+        if (type == "clxx") {
+          upward(index, this.form.clxx);
         } else {
-          this.$alert(res.message);
+          upward(index, this.form.djqx);
         }
-      });
-    },
-    //提交保存数据
-    submit () {
-      let that = this;
-      saveSqdjyw(this.form).then((res) => {
-        if (res.code == 200) {
-          that.$message({
-            message: "修改成功",
-            type: "success",
-          });
-          this.$popupCacel()
+      },
+      moveDown (index, row, type) {
+        if (type == "clxx") {
+          down(index, this.form.clxx);
+        } else {
+          down(index, this.form.djqx);
         }
-      });
-    },
-    // 上移下移
-    moveUpward (index, row, type) {
-      if (type == "clxx") {
-        upward(index, this.form.clxx);
-      } else {
-        upward(index, this.form.djqx);
-      }
+      },
+      addDjqx () {
+        this.form.djqx.push({
+          nodecode: "",
+          nodename: "",
+          enabled: "1",
+          djyy: "",
+          sfqydjyymb: "0",
+        });
+      },
+      removeDjqx (index, row) {
+        this.form.djqx.splice(index, 1);
+      },
+      addClxx () {
+        this.form.clxx.push({
+          isrequired: "1",
+          djqxbm: "",
+          clbm: "",
+          clmc: "",
+          cllx: "",
+          sfggcl: "1",
+        });
+      },
+      removeClxx (index, row) {
+        this.form.clxx.splice(index, 1);
+      },
     },
-    moveDown (index, row, type) {
-      if (type == "clxx") {
-        down(index, this.form.clxx);
-      } else {
-        down(index, this.form.djqx);
-      }
-    },
-    addDjqx () {
-      this.form.djqx.push({
-        nodecode: "",
-        nodename: "",
-        enabled: "1",
-        djyy: "",
-        sfqydjyymb: "0",
-      });
-    },
-    removeDjqx (index, row) {
-      this.form.djqx.splice(index, 1);
-    },
-    addClxx () {
-      this.form.clxx.push({
-        isrequired: "1",
-        djqxbm: "",
-        clbm: "",
-        clmc: "",
-        cllx: "",
-        sfggcl: "1",
-      });
-    },
-    removeClxx (index, row) {
-      this.form.clxx.splice(index, 1);
-    },
-  },
-};
+  };
 </script>
 <style lang='scss' scoped>
-@import "~@/styles/mixin.scss";
-@import "~@/styles/dialogBox.scss";
-@import "~@/styles/collapse.scss";
-@import "~@/styles/dialogBoxheader.scss";
+  @import "~@/styles/mixin.scss";
+  @import "~@/styles/dialogBox.scss";
+  @import "~@/styles/collapse.scss";
+  @import "~@/styles/dialogBoxheader.scss";
 
-.contentBox {
-  height: 75vh;
-  overflow-y: scroll;
-}
+  .contentBox {
+    height: 75vh;
+    overflow-y: scroll;
+  }
 
-.el-radio-group {
-  white-space: nowrap;
-}
+  .el-radio-group {
+    white-space: nowrap;
+  }
 
-.form {
-  background: #eee;
-  padding: 0 10px;
-}
+  .form {
+    background: #eee;
+    padding: 0 10px;
+  }
 
-.edit-title-list {
-  @include flex;
+  .edit-title-list {
+    @include flex;
 
-  li {
-    flex: 1;
-    @include flex-center;
-    border: 1px solid $borderColor;
-    line-height: 36px;
-    margin-bottom: 10px;
-    cursor: pointer;
-    transition: all 0.3s;
+    li {
+      flex: 1;
+      @include flex-center;
+      border: 1px solid $borderColor;
+      line-height: 36px;
+      margin-bottom: 10px;
+      cursor: pointer;
+      transition: all 0.3s;
 
-    &:hover {
-      @extend .active;
+      &:hover {
+        @extend .active;
+      }
     }
   }
-}
-
-.active {
-  background: $light-blue !important;
-  color: #fff;
-}
-
-.dyztsd-title {
-  @include flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: 20px;
-}
-
-.qlxx-list {
-  @include flex;
-  flex-wrap: wrap;
-  padding-left: 20px;
 
-  li {
-    width: 25%;
-    margin-bottom: 15px;
+  .active {
+    background: $light-blue !important;
+    color: #fff;
   }
-}
 
-.screen-list {
-  @include flex;
-  align-items: center;
-  flex-wrap: wrap;
-  border: 1px solid $borderColor;
-  border-bottom: none;
-
-  li {
+  .dyztsd-title {
     @include flex;
     align-items: center;
-    width: 25%;
-    line-height: 50px;
-    border-bottom: 1px solid $borderColor;
+    justify-content: space-between;
     padding-left: 20px;
   }
 
-  &-left {
-    margin-right: 20px;
-    width: 160px;
-    white-space: nowrap;
+  .qlxx-list {
+    @include flex;
+    flex-wrap: wrap;
+    padding-left: 20px;
+
+    li {
+      width: 25%;
+      margin-bottom: 15px;
+    }
   }
 
-  li:nth-child(odd) {
-    border-right: 1px solid $borderColor;
+  .screen-list {
+    @include flex;
+    align-items: center;
+    flex-wrap: wrap;
+    border: 1px solid $borderColor;
+    border-bottom: none;
+
+    li {
+      @include flex;
+      align-items: center;
+      width: 25%;
+      line-height: 50px;
+      border-bottom: 1px solid $borderColor;
+      padding-left: 20px;
+    }
+
+    &-left {
+      margin-right: 20px;
+      width: 160px;
+      white-space: nowrap;
+    }
+
+    li:nth-child(odd) {
+      border-right: 1px solid $borderColor;
+    }
   }
-}
 </style>