feat:申请业务规则配置

+class fileController {
+  uploadUrl () {
+    return process.env.VUE_APP_BASE_API + '/file/upload'
+  }
+}
+export default new fileController()

@@ -36,12 +36,8 @@
     }
 
     .dialog_footer {
-        flex-direction: column;
-
-        .dialog_button {
-            margin-top: 8px;
-            @include flex-center;
-        }
+        margin-top: 8px;
+        @include flex-center;
     }
 }
 

 <template>
   <el-dialog :visible.sync="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" :append-to-body="true"
-    :lock-scroll="true" :close-on-click-modal="false"
-    :custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true"
-    ref="dialogBox">
+    :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog"
+    :custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" ref="dialogBox"
+    id="dialogBox">
     <div slot="title" class="dialog_title" ref="dialogTitle">
       <b>{{ title }}</b>
       <div v-if="isFullscreen" class="dialog_full">
@@ -13,12 +13,10 @@
     <div class="dialogBox-content" :style="{ height: scrollerHeight ? scrollerHeight : 'auto' }" :key="key">
       <slot></slot>
     </div>
-    <div slot="footer" class="dialog_footer" ref="dialogFooter" v-if="isButton">
-      <div class="dialog_button">
-        <el-button @click="closeDialog" v-if="isReset">取消</el-button>
-        <el-button type="primary" plain @click="submitForm" v-if="isSave" :loading="saveloding">
-          {{ saveButton }}</el-button>
-      </div>
+    <div slot="footer" class="dialog_footer" v-if="isButton">
+      <el-button @click="closeDialog" v-if="isReset">取消</el-button>
+      <el-button type="primary" plain @click="submitForm" v-if="isSave" :loading="saveloding">
+        {{ saveButton }}</el-button>
     </div>
   </el-dialog>
 </template>
@@ -87,8 +85,6 @@ export default {
       }
     },
     submitForm () {
-      this.key++
-      this.$emit('input', false)
       this.$emit('submitForm');
     },
     closeDialog () {

 ## 这个是弹框组件，对于element自带的组件进行封装，方便修改全局样式做统一操作
 ### 使用时在组件中引用 
- 
-```
-import dialogBox from '@/components/dialogBox/index'
-
-<dialogBox ref="dialog" title="标题">
-    **在这里面写弹框内容** 
-</dialogBox>
-    *在父组件中使用 的按钮提交方法* 
-    submitForm(ruleForm) {
-
-    }
-```
-##### 如果有多个弹框
-
-```
-import dialogBox from '@/components/dialogBox/index'
-
-<dialogBox ref="dialog" @submitForm="自定义方法" title="标题" :multiple="true">
-    **在这里面写弹框内容** 
-</dialogBox>
-    *在父组件中使用 的按钮提交方法* 
-    自定义方法(ruleForm) {
-
-    }
-```
-
-## 打开该dialog：
-this.$refs.dialog.isShow();
-## 隐藏该dialog：
-this.$refs.dialog.isHide();
\ No newline at end of file

@@ -169,11 +169,6 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
-// Radio 单选框升级之后的问题
-.el-radio {
-  margin-right: 0 !important;
-}
-
 // Divider 分割线 样式的修改
 .el-divider--horizontal {
   margin: 10px 0 !important;
@@ -257,22 +252,11 @@ input[type="number"] {
 }
 
 // 全局修改button颜色
-.el-button--primary {
-  background-color: #2FA5FF;
-}
-
-.el-button--primary.is-plain {
-  background: rgba(15, 147, 246, 0.12);
-  border: 1px solid #0F93F6;
-  color: #0F93F6;
-}
-
-.el-button--warning {
-  background-color: #FFB135;
+.el-select {
+  width: 100%;
 }
 
 .el-form-item__content {
-  //width: 100%;
   flex: 1;
 }
 
@@ -283,12 +267,6 @@ input[type="number"] {
   }
 }
 
-.el-date-editor .el-input__prefix,
-.el-select .el-input .el-select__caret,
-.el-date-editor .el-range__icon {
-  color: #686666;
-}
-
 // 日期选择-日历图标位置
 .el-date-editor .el-input__prefix {
   left: auto;

+<template>
+  <dialogBox title="申请业务规则配置" @submitForm="submitForm" @closeDialog="closeDialog" v-model="value">
+    <div class="sqywgz-edit">
+      <ul class="sqywgz-edit-left">
+        <li v-for="(item, index) in leftList" :key="index" :class="{ active: index == n }" @click="hanldeItem(index)">{{
+            item.name
+        }}</li>
+      </ul>
+      <div class="sqywgz-edit-right">
+        <el-form :model="ruleForm" :rules="rules" label-width="135px" ref="ruleForm">
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="权利类型编码" prop="qllxbm">
+                <el-input v-model="ruleForm.qllxbm"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="权利类型名称" prop="qllxmc">
+                <el-input v-model="ruleForm.qllxmc"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="申请分类" prop="sqfl">
+                <el-select v-model="ruleForm.sqfl" placeholder="请选择">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="登记类型编码" prop="djlxbm">
+                <el-input v-model="ruleForm.djlxbm"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="登记类型名称" prop="djlxmc">
+                <el-input v-model="ruleForm.djlxmc"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="发起业务单元类型" prop="fqywdylx">
+                <el-select v-model="ruleForm.fqywdylx" placeholder="请选择">
+                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="登记业务编码" prop="djywbm">
+                <el-input v-model="ruleForm.djywbm"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="登记业务名称" prop="djywmc">
+                <el-input v-model="ruleForm.djywmc"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="是否启用" prop="sfqy">
+                <el-radio-group v-model="ruleForm.sfqy">
+                  <el-radio :label="1">启用</el-radio>
+                  <el-radio :label="0">禁用</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="业务流程ID" prop="ywlc">
+                <el-input v-model="ruleForm.ywlc"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="登记情形及材料" prop="djqxcl">
+                <el-input v-model="ruleForm.djqxcl" placeholder="仅支持execl文件导入"></el-input>
+              </el-form-item>
+            </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>
+              </el-upload>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="登记原因设置" prop="djyysz">
+                <el-radio-group v-model="ruleForm.djyysz">
+                  <el-radio :label="1">启用</el-radio>
+                  <el-radio :label="0">禁用</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="登记原因模板" prop="djyymb">
+                <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="ruleForm.djyymb">
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+  </dialogBox>
+</template>
+
+<script>
+import fileController from '@/api/fileController'
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+  },
+  data () {
+    return {
+      imgUploadUrl: fileController.uploadUrl(),
+      n: 0,
+      leftList: [
+        {
+          name: '业务详情',
+          select: true
+        },
+        {
+          name: '登记情形设定'
+        },
+        {
+          name: '材料规则设定'
+        },
+        {
+          name: '单元状态设定'
+        }
+      ],
+      ruleForm: {
+        qllxbm: '',
+        qllxmc: '',
+        sqfl: '',
+        djlxbm: '',
+        djlxmc: '',
+        fqywdylx: '',
+        djywbm: '',
+        djywmc: '',
+        sfqy: 1,
+        ywlc: '',
+        djqxcl: '',
+        djyysz: 1,
+        djyymb: ''
+      },
+      requested: false,
+      fileList: [],
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }],
+      rules: {
+        qllxbm: [
+          { required: true, message: '请输入权利类型编码', trigger: 'blur' },
+        ],
+        qllxmc: [
+          { required: true, message: '请输入权利类型名称', trigger: 'blur' },
+        ],
+        sqfl: [
+          { required: true, message: '请选择申请分类', trigger: 'change' },
+        ],
+        djlxbm: [
+          { required: true, message: '请输入登记类型编码', trigger: 'blur' },
+        ],
+        djlxmc: [
+          { required: true, message: '请输入登记类型名称', trigger: 'blur' },
+        ],
+        fqywdylx: [
+          { required: true, message: '请选择发起业务单元类型', trigger: 'change' },
+        ],
+        djywbm: [
+          { required: true, message: '请输入登记业务编码', trigger: 'blur' },
+        ],
+        djywmc: [
+          { required: true, message: '请输入登记业务名称', trigger: 'blur' },
+        ],
+        sfqy: [
+          { required: true, message: '请选择是否启用', trigger: 'change' },
+        ],
+        ywlc: [
+          { required: true, message: '请输入业务流程ID', trigger: 'blur' },
+        ],
+        djqxcl: [
+          { required: true, message: '请选择登记情形及材料', trigger: 'blur' },
+        ],
+        djyysz: [
+          { required: true, message: '请选择登记原因设置', trigger: 'change' },
+        ],
+        djyymb: [
+          { required: true, message: '请输入登记原因模板', trigger: 'blur' },
+        ],
+      }
+    };
+  },
+  methods: {
+    submitForm () {
+      this.$refs['ruleForm'].validate(async (valid) => {
+        if (valid) {
+          this.$emit('input', false)
+        } else {
+          this.$message('请检查表单完整性')
+          return false;
+        }
+      })
+    },
+    closeDialog () {
+      this.$emit('input', false)
+    },
+    hanldeItem (index) {
+      this.n = index
+    },
+    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 (res) {
+      if (res.code === 200) {
+        this.requested = false
+        this.$message({
+          message: '上传成功',
+          type: 'success',
+        })
+        console.log(res);
+      } else {
+        this.loading = false
+        this.$message.error(res.message)
+      }
+    }
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "~@/styles/mixin.scss";
+
+.sqywgz-edit {
+  @include flex;
+  width: 100%;
+
+  &-left {
+    width: 26px;
+
+    .active {
+      background: $light-blue;
+      color: #fff;
+    }
+
+    li {
+      @include flex-center;
+      background-color: #E4E7ED;
+      border-bottom-right-radius: 5px;
+      padding: 10px 5px;
+      cursor: pointer;
+
+      &:hover {
+        @extend .active;
+      }
+    }
+
+    li:not(:last-child) {
+      margin-bottom: 10px;
+    }
+  }
+
+  &-right {
+    margin-left: 20px;
+    flex: 1;
+    width: 100%;
+  }
+}
+</style>

@@ -6,30 +6,15 @@
         <el-row>
           <el-col :span="6">
             <el-form-item label="权利类型">
-              <el-select
-                v-model="queryForm.qllx"
-                filterable
-                clearable
-                placeholder="请选择权利类型"
-              >
-                <el-option
-                  v-for="item in qllxs"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
+              <el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
+                <el-option v-for="item in qllxs" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="登记业务编码">
-              <el-input
-                placeholder="请输入登记业务编码"
-                v-model="queryForm.djywbm"
-                clearable
-                class="width200px"
-              >
+              <el-input placeholder="请输入登记业务编码" v-model="queryForm.djywbm" clearable class="width200px">
               </el-input>
             </el-form-item>
           </el-col>
@@ -47,33 +32,30 @@
     </div>
     <!-- 表格 -->
     <div class="from-clues-content">
-      <lb-table
-        :page-size="pageData.size"
-        @sort-change="handleSort"
-        :current-page.sync="pageData.current"
-        :total="pageData.total"
-        @selection-change="handleSelectionChange"
-        @size-change="handleSizeChange"
-        @p-current-change="handleCurrentChange"
-        :column="tableData.columns"
-        :data="tableData.data"
-      >
+      <lb-table :page-size="pageData.size" @sort-change="handleSort" :current-page.sync="pageData.current"
+        :total="pageData.total" @selection-change="handleSelectionChange" @size-change="handleSizeChange"
+        @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
       </lb-table>
     </div>
+    <editDialog v-model="isDialog" />
   </div>
 </template>
 <script>
 import table from "@/utils/mixin/table";
+import editDialog from "./components/editDialog.vue"
 import { datas, sendThis } from "./sqywgzdata";
 export default {
   name: "djbcx",
-  components: {},
+  components: {
+    editDialog
+  },
   mixins: [table],
-  mounted() {
+  mounted () {
     sendThis(this);
   },
-  data() {
+  data () {
     return {
+      isDialog: false,
       queryForm: {
         qllx: "",
         djywbm: "",
@@ -101,16 +83,12 @@ export default {
   },
   methods: {
     // 初始化数据
-    fetchData() {},
-    handleSort(name, sort) {
+    fetchData () { },
+    handleSort (name, sort) {
       console.log(name, sort);
     },
-    openDialog() {
-      console.log(999999999999999);
-    },
-
-    editClick(){
-      alert("edit");
+    editClick () {
+      this.isDialog = true
     }
   },
 };