fix:新增合同管理

package-lock.json

@@ -93,17 +93,17 @@
       "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg=="
     },
     "@babel/runtime": {
-      "version": "7.15.3",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.3.tgz",
-      "integrity": "sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.14.0"
       },
       "dependencies": {
         "regenerator-runtime": {
-          "version": "0.13.9",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-          "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+          "version": "0.14.1",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+          "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
         }
       }
     },
@@ -182,7 +182,7 @@
     },
     "@riophae/vue-treeselect": {
       "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@riophae/vue-treeselect/-/vue-treeselect-0.4.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@riophae/vue-treeselect/-/vue-treeselect-0.4.0.tgz",
       "integrity": "sha512-J4atYmBqXQmiPFK/0B5sXKjtnGc21mBJEiyKIDZwk0Q9XuynVFX6IJ4EpaLmUgL5Tve7HAS7wkiGGSti6Uaxcg==",
       "requires": {
         "@babel/runtime": "^7.3.1",
@@ -203,6 +203,16 @@
         "vue": "^2.5.17"
       }
     },
+    "@vue-office/docx": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmmirror.com/@vue-office/docx/-/docx-1.6.2.tgz",
+      "integrity": "sha512-OHAoUHeY8nHjhWvwDhlPx+/rmRkxmqLpvPgtfCEOZ4H1c1LCdJ6eDbdV3152ww8dcdZ7fgGQu3fmSSaI7JwdpQ=="
+    },
+    "@vue-office/pdf": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmmirror.com/@vue-office/pdf/-/pdf-2.0.8.tgz",
+      "integrity": "sha512-birBaYIlZM4I7wLqf4pqiytM1Zf0xAZagE7zdsraGuCl0P4eRrb2HMzkDoOLghyeNT6xc7DL8o76cPNnMPdd1w=="
+    },
     "@vue/compiler-sfc": {
       "version": "2.7.16",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
@@ -237,6 +247,11 @@
         }
       }
     },
+    "@vue/composition-api": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmmirror.com/@vue/composition-api/-/composition-api-1.7.2.tgz",
+      "integrity": "sha512-M8jm9J/laYrYT02665HkZ5l2fWTK4dcVg3BsDHm/pfz+MjDYwX+9FUaZyGwEyXEDonQYRCo0H7aLgdklcIELjw=="
+    },
     "@ztree/ztree_v3": {
       "version": "3.5.46",
       "resolved": "https://registry.npmjs.org/@ztree/ztree_v3/-/ztree_v3-3.5.46.tgz",
@@ -3062,7 +3077,7 @@
     },
     "decimal.js": {
       "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "resolved": "https://registry.npmmirror.com/decimal.js/-/decimal.js-10.4.3.tgz",
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
     "decode-uri-component": {
@@ -5090,8 +5105,8 @@
     },
     "fuzzysearch": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/fuzzysearch/-/fuzzysearch-1.0.3.tgz",
-      "integrity": "sha1-3/yA9tawQiPyImqnndGUIxCW0Ag="
+      "resolved": "https://registry.npmmirror.com/fuzzysearch/-/fuzzysearch-1.0.3.tgz",
+      "integrity": "sha512-s+kNWQuI3mo9OALw0HJ6YGmMbLqEufCh2nX/zzV5CrICQ/y4AwPxM+6TIiF9ItFCHXFCyM/BfCCmN57NTIJuPg=="
     },
     "gauge": {
       "version": "2.7.4",
@@ -13719,6 +13734,11 @@
         "clipboard": "^2.0.0"
       }
     },
+    "vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w=="
+    },
     "vue-dialog-drag": {
       "version": "0.1.29",
       "resolved": "https://registry.npmjs.org/vue-dialog-drag/-/vue-dialog-drag-0.1.29.tgz",

package.json

@@ -16,6 +16,9 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "^0.4.0",
     "@tinymce/tinymce-vue": "^2.0.1",
+    "@vue-office/docx": "^1.6.2",
+    "@vue-office/pdf": "^2.0.8",
+    "@vue/composition-api": "^1.7.2",
     "@ztree/ztree_v3": "^3.5.46",
     "axios": "^0.18.1",
     "base-64": "^1.0.0",
@@ -39,6 +42,7 @@
     "v-viewer": "^1.5.1",
     "vue": "^2.5.2",
     "vue-clipboard2": "^0.3.3",
+    "vue-demi": "^0.14.6",
     "vue-dialog-drag": "^0.1.29",
     "vue-directive-window": "^0.8.0",
     "vue-draggable-resizable-gorkys": "^2.4.8",

src/components/TreeSelect/treeSelectCheck.vue

@@ -0,0 +1,210 @@
+<template>
+  <el-select
+    v-model="valueTitle"
+    @clear="clearHandle"
+    clearable
+    multiple
+    size="small"
+    style="width: 220px"
+  >
+    <el-input
+      class="selectInput"
+      :placeholder="placeholder"
+      v-model="filterText"
+    >
+    </el-input>
+
+    <el-option :value="valueTitle" :label="valueTitle" class="options">
+      <el-tree
+        id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"
+        :default-expanded-keys="defaultExpandedKey"
+        :filter-node-method="filterNode"
+        show-checkbox
+        @check-change="handleNodeClick"
+      >
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: "el-tree-select",
+  props: {
+    /* 配置项 */
+    props: {
+      type: Object,
+      default: () => {
+        return {
+          value: "id", // ID字段名
+          label: "name", // 显示名称
+          children: "children", // 子级字段名
+        };
+      },
+    },
+    /* 选项列表数据(树形结构的对象数组) */
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    /* 初始值 */
+    value: {
+      type: Number,
+      default: () => {
+        return null;
+      },
+    },
+    /* 可清空选项 */
+    clearable: {
+      type: Boolean,
+      default: () => {
+        return true;
+      },
+    },
+    /* 自动收起 */
+    accordion: {
+      type: Boolean,
+      default: () => {
+        return false;
+      },
+    },
+    placeholder: {
+      type: String,
+      default: () => {
+        return "检索关键字";
+      },
+    },
+  },
+  data() {
+    return {
+      filterText: "",
+      valueId: this.value, // 初始值
+      valueTitle: [],
+      defaultExpandedKey: [],
+      tree: [],
+      treeIds: [],
+      ids: [],
+    };
+  },
+  mounted() {
+    this.initHandle();
+  },
+  methods: {
+    // 初始化值
+    initHandle() {
+      if (this.valueId) {
+        this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[
+          this.props.label
+        ]; // 初始化显示
+        this.$refs.selectTree.setCurrentKey(this.valueId); // 设置默认选中
+        this.defaultExpandedKey = [this.valueId]; // 设置默认展开
+      }
+      this.initScroll();
+    },
+    // 初始化滚动条
+    initScroll() {
+      this.$nextTick(() => {
+        let scrollWrap = document.querySelectorAll(
+          ".el-scrollbar .el-select-dropdown__wrap"
+        )[0];
+        let scrollBar = document.querySelectorAll(
+          ".el-scrollbar .el-scrollbar__bar"
+        );
+        scrollWrap.style.cssText =
+          "margin: 0px; max-height: none; overflow: hidden;";
+        scrollBar.forEach((ele) => (ele.style.width = 0));
+      });
+    },
+    // 切换选项
+    handleNodeClick(node, check) {
+      console.log(node, check);
+      if (check) {
+        this.tree.push(node[this.props.label]);
+        this.ids.push(node[this.props.value]);
+        this.valueTitle = Array.from(new Set(this.tree));
+        this.treeIds = Array.from(new Set(this.ids));
+      } else {
+      }
+      this.$emit("getValue", this.treeIds);
+      // this.defaultExpandedKey = [];
+    },
+    // 清除选中
+    clearHandle() {
+      this.valueTitle = [];
+      this.valueId = null;
+      this.defaultExpandedKey = [];
+      this.clearSelected();
+      this.$emit("getValue", null);
+    },
+    /* 清空选中样式 */
+    clearSelected() {
+      let allNode = document.querySelectorAll("#tree-option .el-tree-node");
+      allNode.forEach((element) => element.classList.remove("is-current"));
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+  },
+  watch: {
+    value() {
+      this.valueId = this.value;
+      this.initHandle();
+    },
+    filterText(val) {
+      this.$refs.selectTree.filter(val);
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 274px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+ul li >>> .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+}
+.el-tree-node__label {
+  font-weight: normal;
+}
+.el-tree >>> .is-current .el-tree-node__label {
+  color: #409eff;
+  font-weight: 700;
+}
+.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
+  color: #606266;
+  font-weight: normal;
+}
+.selectInput {
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+/* 开发禁用 */
+/* .el-tree-node:focus>.el-tree-node__content{
+    background-color:transparent;
+    background-color: #f5f7fa;
+    color: #c0c4cc;
+    cursor: not-allowed;
+  }
+  .el-tree-node__content:hover{
+    background-color: #f5f7fa;
+  } */
+</style>

src/http/api.js

@@ -59,6 +59,7 @@ import * as readPdf from './moudules/readPdf.js'
 
 //协议组 
 import * as agreement from "./moudules/agreement.js"
+import * as contract from "./moudules/contract.js"
 // 默认全部导出
 export default {
     login,
@@ -102,5 +103,6 @@ export default {
     sys,
     bindUser,
     readPdf,
-    agreement
+    agreement,
+    contract
 }

src/http/moudules/contract.js

@@ -0,0 +1,68 @@
+
+import axios from '../axios'
+
+// 获取甲乙方列表
+export const getInvAccountList = (data) => {
+    return axios({
+        url: '/invAccount/getInvAccountList',
+        method: 'post',
+        data
+    })
+}
+
+// 获取供应商树形
+export const getEsmInsCompany = (data) => {
+    return axios({
+        url: '/esmInsCompany/findTree',
+        method: 'post',
+        data
+    })
+}
+//获取数据权限字典
+export async function getContractType(data) {
+    return axios({ url: "/dict/findByLable?lable=" + data, method: 'get', })
+}
+//新增/修改合同
+export const constractSave = (data) => {
+    return axios({
+        url: '/fnc/contract/saveAndUpdate',
+        method: 'post',
+        data
+    })
+}
+//合同列表
+export const constractQueryPage = (data) => {
+    return axios({
+        url: '/fnc/contract/queryPage',
+        method: 'post',
+        data
+    })
+}
+//编辑回显
+export const editorShow = (data) => {
+    return axios({
+        url: '/fnc/contract/' + data.id,
+        method: 'get',
+        data
+    })
+}
+//下载附件
+export const downloadFile = (data) => {
+    return axios({
+        url: '/upload/file/' + data,
+        method: 'get',
+        data
+    })
+}
+//补充协议
+export const supplementContract = (data) => {
+    return axios({
+        url: '/fnc/contract/copyContract',
+        method: 'post',
+        data
+    })
+}
+
+
+
+

src/main.js

@@ -9,15 +9,15 @@ import ElementUI from 'element-ui'
 import '@/utils/directives.js'
 import VueSplit from 'vue-split-panel'
 import VueDirectiveWindow from 'vue-directive-window';
-import {dateFormat} from '@/utils/dataformat.js'
+import { dateFormat } from '@/utils/dataformat.js'
 import btnPermission from '@/utils/btnPermission'
 import dialogDrag from '@/utils/dialogDrag'
 import VueClipboard from 'vue-clipboard2'
- 
+
 
 import vdr from 'vue-draggable-resizable-gorkys';
 import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css';
- 
+
 
 import 'element-ui/lib/theme-chalk/index.css'
 // import 'element-ui/lib/'
@@ -51,7 +51,7 @@ Vue.directive('watermark', {
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
     ctx.translate(canvas.width / 2, canvas.height / 2);
-     ctx.rotate(-30*Math.PI/180);
+    ctx.rotate(-30 * Math.PI / 180);
     ctx.fillText(watermarkText, 0, 0);
     const base64 = canvas.toDataURL('image/png');
     const watermarkDiv = document.createElement('div');
@@ -83,6 +83,9 @@ Vue.use(dialogDrag)
 
 Vue.component('vdr', vdr);
 Vue.prototype.global = global
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+Vue.component('treeselect', Treeselect)
 
 new Vue({
   el: '#app',

src/views/FinancialManagement/ContractManagement/ContractManagement.vue

@@ -0,0 +1,1066 @@
+<template>
+  <div class="contract">
+    <el-row>
+      <el-form
+        :inline="true"
+        :model="formInline"
+        class="demo-form-inline"
+        label-width="130px"
+      >
+        <el-col :span="6">
+          <el-form-item label="合同信息">
+            <el-input
+              v-model="formInline.user"
+              placeholder="请输入合同信息"
+              size="small"
+              style="width: 220px"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="供应商名称">
+            <el-cascader
+              :options="esmInsCompanyList"
+              :props="{
+                checkStrictly: true,
+                value: 'id',
+                label: 'name',
+                children: 'children',
+              }"
+              clearable
+            ></el-cascader>
+            <!-- <el-select
+              v-model="formInline.user"
+              placeholder="供应商名称"
+              size="small"
+              filterable
+            >
+              <el-option>全部</el-option>
+            </el-select> -->
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="甲方">
+            <el-select
+              size="small"
+              v-model="formInline.externalCompaniesId"
+              filterable
+              clearable
+              style="width: 220px"
+            >
+              <el-option
+                v-for="item in accountList"
+                :key="item.accountId"
+                :value="item.accountId"
+                :label="item.accountName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="乙方">
+            <el-select
+              size="small"
+              v-model="formInline.internalCompanyId"
+              filterable
+              clearable
+              style="width: 220px"
+            >
+              <el-option
+                v-for="item in accountList"
+                :key="item.accountId"
+                :value="item.accountId"
+                :label="item.accountName"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="6">
+          <el-form-item label="合同类型">
+            <el-select
+              size="small"
+              v-model="formInline.contractType"
+              style="width: 220px"
+            >
+              <el-option
+                v-for="item in contractTypeList"
+                :key="item.id"
+                :value="item.value"
+                :label="item.label"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="状态">
+            <el-select
+              v-model="formInline.contractStatus"
+              placeholder="状态"
+              size="small"
+              filterable
+              style="width: 220px"
+            >
+              <el-option value="all" label="全部">全部</el-option>
+              <el-option value="1" label="失效">失效</el-option>
+              <el-option value="0" label="有效">有效</el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item label="   ">
+            <el-button type="primary" size="small" @click="getList"
+              >查询</el-button
+            >
+            <el-button type="primary" size="small" @click="addContract"
+              >新增</el-button
+            >
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+    <el-table
+      size="small"
+      :data="tableData"
+      style="width: 100%"
+      border
+      :header-cell-style="{
+        background: '#F2F7FC',
+        fontWeight: '700',
+        color: '#606266',
+      }"
+      highlight-current-row
+    >
+      <el-table-column prop="contractCode" label="合同编码" width="180">
+      </el-table-column>
+      <el-table-column prop="contractName" label="合同名称" width="180">
+      </el-table-column>
+      <el-table-column prop="contractType" label="合同类型">
+        <template slot-scope="scope">
+          <div>
+            {{
+              contractTypeList
+                .map((v, i) => {
+                  // return scope.row.contractType == v.id ? v.label : "";
+                  if (scope.row.contractType == v.value) {
+                    return v.label;
+                  }
+                })
+                .join("")
+            }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="externalCompaniesName" label="甲方">
+      </el-table-column>
+      <el-table-column prop="internalCompanyName" label="乙方">
+      </el-table-column>
+      <el-table-column prop="supplierName" label="供应商名称">
+        <template slot-scope="scope">
+          <div v-for="(item, index) in scope.row.namesimpleList" :key="index">
+            {{ index < 3 ? item : "" }}
+          </div>
+
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="
+              scope.row.namesimpleList
+                .map((v, i) => {
+                  return v;
+                })
+                .join(',')
+            "
+            placement="top"
+          >
+            <span v-show="scope.row.namesimpleList.length > 3">...</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column prop="effectiveDate" label="生效日期"> </el-table-column>
+      <el-table-column prop="expiringDate" label="失效日期"> </el-table-column>
+      <el-table-column prop="shouldPostponed" label="是否顺延">
+        <template slot-scope="scope">
+          <el-tag
+            :type="scope.row.shouldPostponed == '0' ? 'success' : 'danger'"
+            effect="dark"
+          >
+            {{ scope.row.shouldPostponed == "0" ? "是" : "否" }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="shouldPostponedEffectiveDate"
+        label="顺延后失效日期"
+        width="180"
+      >
+      </el-table-column>
+      <el-table-column prop="operation" label="操作" width="180">
+        <template slot-scope="scope">
+          <el-button size="small" type="primary" @click="edit(scope.row)"
+            >编辑</el-button
+          >
+          <el-dropdown>
+            <el-button type="primary" size="small">
+              更多<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                command="supplement"
+                @click.native="handleCommand('supplement', scope.row)"
+                >补充协议</el-dropdown-item
+              >
+              <el-dropdown-item
+                command="watch"
+                @click.native="handleCommand('watch', scope.row)"
+                >查看附件</el-dropdown-item
+              >
+              <el-dropdown-item
+                command="download"
+                @click.native="handleCommand('download', scope.row)"
+                >下载附件</el-dropdown-item
+              >
+              <el-dropdown-item
+                command="error"
+                @click.native="handleCommand('error', scope.row)"
+                >设置为失效</el-dropdown-item
+              >
+              <!-- <el-dropdown-item>双皮奶</el-dropdown-item>
+            <el-dropdown-item>蚵仔煎</el-dropdown-item> -->
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageInfo.pageNum"
+      :page-sizes="[10, 20, 30, 50]"
+      :page-size="pageInfo.pageSize"
+      layout=" sizes, prev, pager, next, jumper"
+      :total="0"
+    >
+    </el-pagination>
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :before-close="handleClose"
+    >
+      <el-row>
+        <el-form :model="form" :inline="true" :rules="rules" ref="ruleForm">
+          <el-col :span="12">
+            <el-form-item label="合同编号" label-width="130px">
+              <el-input
+                size="small"
+                v-model="form.contractCode"
+                autocomplete="off"
+                :disabled="true"
+                style="width: 220px"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="合同名称"
+              label-width="130px"
+              prop="contractName"
+            >
+              <el-input
+                v-model="form.contractName"
+                placeholder="请输入合同名称"
+                size="small"
+                style="width: 220px"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="合同类型"
+              label-width="130px"
+              prop="contractType"
+            >
+              <!-- <treeSelect :options="data" /> -->
+              <el-select
+                size="small"
+                v-model="form.contractType"
+                style="width: 220px"
+              >
+                <el-option
+                  v-for="item in contractTypeList"
+                  :key="item.id"
+                  :value="item.value"
+                  :label="item.label"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="甲方"
+              label-width="130px"
+              prop="externalCompaniesId"
+            >
+              <el-select
+                size="small"
+                v-model="form.externalCompaniesId"
+                filterable
+                clearable
+                @change="companyChange(form.externalCompaniesId, '1')"
+                style="width: 220px"
+              >
+                <el-option
+                  v-for="item in accountList"
+                  :key="item.accountId"
+                  :value="item.accountId"
+                  :label="item.accountName"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="甲方账户类型" label-width="130px">
+              <el-input
+                size="small"
+                v-model="form.externType"
+                autocomplete="off"
+                :disabled="true"
+                style="width: 220px"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="乙方"
+              label-width="130px"
+              prop="internalCompanyId"
+            >
+              <el-select
+                size="small"
+                v-model="form.internalCompanyId"
+                filterable
+                clearable
+                @change="companyChange(form.internalCompanyId, '2')"
+                style="width: 220px"
+              >
+                <el-option
+                  v-for="item in accountList"
+                  :key="item.accountId"
+                  :value="item.accountId"
+                  :label="item.accountName"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="乙方账户类型" label-width="130px">
+              <el-input
+                size="small"
+                v-model="form.internalType"
+                autocomplete="off"
+                :disabled="true"
+                style="width: 220px"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item
+              label="供应商"
+              label-width="130px"
+              class="supplier"
+              prop="supplierIdList"
+            >
+              <!-- <treeSelect :options="esmInsCompanyList" @getValue="getValue" /> -->
+              <treeselect
+                v-model="form.supplierIdList"
+                placeholder="请选择"
+                :options="esmInsCompanyList"
+                :normalizer="normalizer"
+                :multiple="true"
+                @select="handleSelect"
+                :children-as-objects="true"
+              ></treeselect>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="是否为开口合同"
+              label-width="130px"
+              prop="isOpenContract"
+            >
+              <!-- <treeSelect :options="data" /> -->
+              <!-- <el-switch
+                v-model="form.isOpenContract"
+                active-text="是"
+                inactive-text="否"
+              >
+              </el-switch> -->
+              <el-radio v-model="form.isOpenContract" label="0">是</el-radio>
+              <el-radio v-model="form.isOpenContract" label="1">否</el-radio>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="生效日期"
+              label-width="130px"
+              prop="effectiveDate"
+            >
+              <el-date-picker
+                size="small"
+                v-model="form.effectiveDate"
+                type="datetime"
+                placeholder="选择日期时间"
+                value-format="yyyy-MM-dd HH:mm:ss"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+              label="失效日期"
+              label-width="130px"
+              :rules="isRequired('expiringDate')"
+            >
+              <el-date-picker
+                size="small"
+                v-model="form.expiringDate"
+                type="datetime"
+                :default-time="'23:59:59'"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                placeholder="选择失效日期时间"
+                :picker-options="pickerOptionsEnd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="是否顺延" label-width="130px">
+              <el-radio v-model="form.shouldPostponed" label="0">是</el-radio>
+              <el-radio v-model="form.shouldPostponed" label="1">否</el-radio>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item
+              label="顺延时间"
+              label-width="180px"
+              style="width: 100%"
+            >
+              <div style="width: 100%; display: flex; align-items: center">
+                <el-radio
+                  :disabled="form.shouldPostponed != 0"
+                  v-model="date"
+                  label="year"
+                  >年</el-radio
+                >
+                <el-input
+                  :disabled="date != 'year'"
+                  size="small"
+                  style="width: 180px"
+                  v-model="year"
+                  @input="(value) => (year = value.replace(/[^\d]/g, ''))"
+                  placeholder="请输入年"
+                  @change="timeChange('year')"
+                ></el-input>
+              </div>
+              <div style="width: 100%; display: flex; align-items: center">
+                <el-radio
+                  :disabled="form.shouldPostponed != 0"
+                  v-model="date"
+                  label="month"
+                  >月</el-radio
+                >
+                <el-input
+                  :disabled="date != 'month'"
+                  size="small"
+                  style="width: 180px"
+                  v-model="month"
+                  @input="(value) => (month = value.replace(/[^\d]/g, ''))"
+                  placeholder="请输入月"
+                  @change="timeChange('month')"
+                ></el-input>
+              </div>
+              <div style="width: 100%; display: flex; align-items: center">
+                <el-radio
+                  :disabled="form.shouldPostponed != 0"
+                  v-model="date"
+                  label="day"
+                  >天</el-radio
+                >
+                <el-input
+                  :disabled="date != 'day'"
+                  size="small"
+                  style="width: 180px"
+                  v-model="days"
+                  @input="(value) => (days = value.replace(/[^\d]/g, ''))"
+                  placeholder="请输入天"
+                  @change="timeChange('days')"
+                ></el-input>
+              </div>
+            </el-form-item>
+            <el-col :span="24">
+              <el-form-item label="顺延后失效日期" label-width="160px">
+                <el-date-picker
+                  size="small"
+                  v-model="form.shouldPostponedEffectiveDate"
+                  type="datetime"
+                  disabled
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="合同附件" label-width="130px">
+              <el-upload
+                class="upload-demo"
+                action=""
+                multiple
+                :limit="10"
+                :file-list="form.filePathIdList"
+                :http-request="httpRequest"
+                accept=".pdf,.doc,.docx"
+              >
+                <el-button size="small" type="primary">点击上传</el-button>
+                <!-- <div slot="tip" class="el-upload__tip">
+                  只能上传jpg/png文件，且不超过500kb
+                </div> -->
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submit">确 定</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog title="附件" :visible.sync="fileDialog" width="50%">
+      <div class="block">
+        <el-carousel trigger="click" height="600px" :autoplay="false">
+          <el-carousel-item
+            v-for="item in showFileList"
+            :key="item.url"
+            style="height: 1400px; overflow-y: auto"
+          >
+            <div
+              style="
+                display: flex;
+                justify-content: center;
+                margin-bottom: 10px;
+              "
+            >
+              <el-button type="primary" icon="el-icon-download" size="small"
+                >下载</el-button
+              >
+            </div>
+            <vue-office-docx
+              v-show="item.url.includes('.docx')"
+              :src="base + item.url"
+              @rendered="renderedHandler"
+              @error="errorHandler"
+            />
+            <vue-office-pdf
+              v-show="item.url.includes('.pdf')"
+              :src="base + item.url"
+              @rendered="renderedHandler"
+              @error="errorHandler"
+            />
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import treeSelect from "../../../components/TreeSelect/treeSelectCheck.vue";
+import moment from "moment"; //引入js日期处理类库
+import VueOfficeDocx from "@vue-office/docx";
+import VueOfficePdf from "@vue-office/pdf";
+import "@vue-office/docx/lib/index.css";
+export default {
+  components: {
+    treeSelect,
+    VueOfficeDocx,
+    VueOfficePdf,
+  },
+  data() {
+    return {
+      fileDialog: false,
+      showFileList: [],
+      formInline: {
+        contractCode: "",
+        contractName: "",
+        contractStatus: "",
+        contractType: "",
+        externalCompaniesId: "",
+        internalCompanyId: "",
+      },
+      base: process.env.BASE_URL,
+      form: {
+        contractCode: "",
+        contractType: "",
+        contractName: "",
+        externalCompaniesId: "",
+        internalCompanyId: "",
+        supplierIdList: [],
+        isOpenContract: "1",
+        effectiveDate: "",
+        expiringDate: "",
+        shouldPostponed: "1",
+        shouldPostponedEffectiveDate: "",
+        filePathIdList: [],
+      },
+      rules: {
+        contractName: [
+          {
+            required: true,
+            message: "请填写合同名称",
+            trigger: "blur",
+          },
+        ],
+        contractType: [
+          {
+            required: true,
+            message: "请选择合同类型",
+            trigger: "change",
+          },
+        ],
+        externalCompaniesId: [
+          {
+            required: true,
+            message: "请选择甲方",
+            trigger: "change",
+          },
+        ],
+        internalCompanyId: [
+          {
+            required: true,
+            message: "请选择乙方",
+            trigger: "change",
+          },
+        ],
+        supplierIdList: [
+          {
+            required: true,
+            message: "请选择供应商",
+            trigger: "change",
+          },
+        ],
+        isOpenContract: [
+          {
+            required: true,
+            message: "请选择是否为开口合同",
+            trigger: "change",
+          },
+        ],
+      },
+      pickerOptionsEnd: {
+        disabledDate: (time) => {
+          let beginDateVal = this.form.effectiveDate;
+          if (beginDateVal) {
+            return time.getTime() < new Date(beginDateVal).getTime();
+          }
+        },
+      },
+
+      title: "",
+      dialogVisible: false,
+      tableData: [],
+      data: [
+        {
+          title: "一级 1",
+          children: [
+            {
+              title: "二级 1-1",
+              children: [
+                {
+                  title: "三级 1-1-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          title: "一级 2",
+          children: [
+            {
+              title: "二级 2-1",
+              children: [
+                {
+                  title: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              title: "二级 2-2",
+              children: [
+                {
+                  title: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          title: "一级 3",
+          children: [
+            {
+              title: "二级 3-1",
+              children: [
+                {
+                  title: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              title: "二级 3-2",
+              children: [
+                {
+                  title: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      date: "",
+      time: "",
+
+      month: "",
+      year: "",
+      days: "",
+      accountList: [],
+      accountObj: {},
+      esmInsCompanyList: [],
+      contractTypeList: [],
+      supplierIdChildList: [],
+      pageInfo: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+      },
+      resetForm: {},
+      operation: "",
+      fileIdList: [],
+    };
+  },
+  computed: {},
+  created() {},
+  mounted() {
+    this.getInvAccountList();
+    this.getEsmInsCompany();
+    this.getContractType();
+    this.getList();
+    this.resetForm = { ...this.form };
+  },
+  methods: {
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`);
+
+      this.pageInfo.pageSize = val;
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.pageInfo.pageNum = val;
+      this.getList();
+    },
+    //更多操作
+    handleCommand(commad, row) {
+      this.operation = commad;
+      this.$api.contract
+        .editorShow({
+          id: row.id,
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            this.showFileList = [...res.data.contractFileEntityList];
+            this.form = {
+              contractCode: res.data.contractCode,
+              contractType: res.data.contractType,
+              // contractName: res.data.contractName,
+              externalCompaniesId: res.data.externalCompaniesId,
+              internalCompanyId: res.data.internalCompanyId,
+              supplierIdList: res.data.supplierIdList,
+              // isOpenContract: res.data.isOpenContract,
+              // effectiveDate: res.data.effectiveDate,
+              // expiringDate: res.data.expiringDate,
+              shouldPostponed: res.data.shouldPostponed,
+              shouldPostponedEffectiveDate:
+                res.data.shouldPostponedEffectiveDate,
+              externType: res.data.externType,
+              internalType: res.data.internalType,
+              id: res.data.id,
+
+              filePathIdList:
+                res.data.contractFileEntityList != null
+                  ? res.data.contractFileEntityList.map((v, i) => {
+                      return { name: v.fileName, url: v.url };
+                    })
+                  : [],
+            };
+            this.fileIdList =
+              res.data.contractFileEntityList != null
+                ? res.data.contractFileEntityList.map((v, i) => {
+                    return v.id;
+                  })
+                : [];
+            if (commad == "supplement") {
+              this.dialogVisible = true;
+            }
+            if (commad == "watch") {
+              this.fileDialog = true;
+            }
+          }
+        });
+    },
+    //获取合同列表
+    getList() {
+      this.$api.contract
+        .constractQueryPage({
+          ...this.pageInfo,
+          ...this.formInline,
+        })
+        .then((res) => {
+          // console.log(res);
+          if (res.code === 200) {
+            this.tableData = [...res.data.records];
+            this.pageInfo.total = res.data.total;
+          }
+        });
+    },
+    //格式化tree数据
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        // 去掉children=[]的children属性
+        delete node.children;
+      }
+      return {
+        id: node.id, // ID字段名
+        label: node.name, // 显示名称
+        children: node.children, // 子级字段名
+      };
+    },
+    //treeSelect 选择时触发
+    handleSelect(node) {
+      if (node.children instanceof Array && node.children.length) {
+        this.chooseChild(node.children);
+      }
+    },
+    //递归
+    chooseChild(list) {
+      list.forEach((v, i) => {
+        this.supplierIdChildList.push(v.id);
+        if (v.children instanceof Array && v.children.length) {
+          this.chooseChild(v.children);
+        }
+      });
+    },
+    //新增
+    submit() {
+      // console.log(this.form.supplierIdList);
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          if (this.operation != "supplement") {
+            this.$api.contract
+              .constractSave({
+                ...this.form,
+                supplierIdList: [
+                  ...this.form.supplierIdList,
+                  ...this.supplierIdChildList,
+                ],
+                filePathIdList: this.fileIdList,
+              })
+              .then((res) => {
+                if (res.code === 200) {
+                  this.$message.success(res.msg);
+                }
+              });
+          } else {
+            this.$api.contract
+              .supplementContract({
+                ...this.form,
+                supplierIdList: [
+                  ...this.form.supplierIdList,
+                  ...this.supplierIdChildList,
+                ],
+                filePathIdList: this.fileIdList,
+              })
+              .then((res) => {
+                if (res.code === 200) {
+                  this.$message.success(res.msg);
+                }
+              });
+          }
+        }
+      });
+    },
+    //供应商id
+    getValue(val) {
+      this.form.supplierIdList = [...val];
+    },
+    //获取合同类型
+    getContractType() {
+      this.$api.contract.getContractType("contract_type").then((res) => {
+        if (res.code === 200) {
+          this.contractTypeList = [...res.data];
+        }
+      });
+    },
+    //获取供应商树形
+    getEsmInsCompany() {
+      this.$api.contract.getEsmInsCompany({}).then((res) => {
+        if (res.code === 200) {
+          this.esmInsCompanyList = [...res.data];
+        }
+      });
+    },
+    //甲方/乙方选择
+    companyChange(id, type) {
+      if (type == "1") {
+        this.form.externType = this.accountObj[id] == "0" ? "内部" : "外部";
+      } else {
+        this.form.internalType = this.accountObj[id] == "0" ? "内部" : "外部";
+      }
+    },
+    // 上传的方法Start
+    beforeAvatarUpload(file) {
+      console.log(file);
+    },
+    //上传影像
+    httpRequest(options) {
+      let file = options.file;
+      let filename = options.filename;
+      let reader = new FileReader();
+      if (file) {
+        reader.readAsDataURL(file);
+      }
+      reader.onload = () => {
+        let base64Str = reader.result;
+        this.dataForm[options.filename] = base64Str;
+      };
+      const params = new FormData(); // 声明formData数据类型
+      params.append("multipartFile", file);
+      params.append("type", "personnel");
+      this.$api.letter.uploadFile(params).then((res) => {
+        if (res.code == "200") {
+          this.form.filePathIdList.push(res.data.id);
+          this.fileIdList.push(res.data.id);
+        }
+      });
+    },
+    //获取甲乙方列表
+    getInvAccountList() {
+      this.$api.contract.getInvAccountList({}).then((res) => {
+        if (res.code === 200) {
+          this.accountList = [...res.data];
+          const obj = {};
+          res.data.forEach((v, i) => {
+            obj[v.accountId] = v.outerFlag;
+          });
+          this.accountObj = { ...obj };
+        }
+      });
+    },
+    //必填项
+    isRequired() {
+      if (this.form.isOpenContract == "0") {
+        return {
+          type: "date",
+          required: true,
+          message: "请选择失效日期",
+          trigger: "change",
+        };
+      } else {
+        return {};
+      }
+
+      // return true;
+    },
+    timeChange(type) {
+      if (type == "year") {
+        this.form.shouldPostponedEffectiveDate = moment(this.form.expiringDate)
+          .add(this[type], "year")
+          .format("YYYY-MM-DD HH:mm:ss");
+      } else if (type == "month") {
+        this.form.shouldPostponedEffectiveDate = moment(this.form.expiringDate)
+          .add(this[type], "month")
+          .format("YYYY-MM-DD HH:mm:ss");
+      } else {
+        this.form.shouldPostponedEffectiveDate = moment(this.form.expiringDate)
+          .add(this[type], "days")
+          .format("YYYY-MM-DD HH:mm:ss");
+      }
+      console.log();
+    },
+    handleClose(done) {
+      done();
+    },
+    addContract() {
+      this.dialogVisible = true;
+      this.title = "新增";
+      this.operation = "add";
+      this.form = { ...this.resetForm };
+    },
+    edit(row) {
+      this.title = "编辑";
+      this.operation = "edit";
+      this.$api.contract
+        .editorShow({
+          id: row.id,
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            this.dialogVisible = true;
+            // this.form
+            this.form = {
+              contractCode: res.data.contractCode,
+              contractType: res.data.contractType,
+              contractName: res.data.contractName,
+              externalCompaniesId: res.data.externalCompaniesId,
+              internalCompanyId: res.data.internalCompanyId,
+              supplierIdList: res.data.supplierIdList,
+              isOpenContract: res.data.isOpenContract,
+              effectiveDate: res.data.effectiveDate,
+              expiringDate: res.data.expiringDate,
+              shouldPostponed: res.data.shouldPostponed,
+              shouldPostponedEffectiveDate:
+                res.data.shouldPostponedEffectiveDate,
+              externType: res.data.externType,
+              internalType: res.data.internalType,
+              id: res.data.id,
+
+              filePathIdList: res.data.contractFileEntityList
+                ? res.data.contractFileEntityList.map((v, i) => {
+                    return { name: v.fileName, url: v.url };
+                  })
+                : [],
+            };
+            this.fileIdList =
+              res.data.contractFileEntityList != null
+                ? res.data.contractFileEntityList.map((v, i) => {
+                    return v.id;
+                  })
+                : [];
+          }
+        });
+    },
+  },
+};
+</script>
+<style lang='less' scoped>
+.contract {
+  // display: ;
+  padding: 14px;
+  box-sizing: border-box;
+}
+.supplier {
+  display: flex;
+  /deep/ .el-form-item__content {
+    flex: 1;
+  }
+}
+</style>

src/views/FinancialManagement/ExpenseManagement/ExpenseComponent.vue

@@ -111,22 +111,36 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-              <el-form-item label="暂估值" prop="tentativeEstimates"
-                :rules="[{
+            <el-form-item
+              label="暂估值"
+              prop="tentativeEstimates"
+              :rules="[
+                {
                   required: true,
                   message: '暂估值不能为空',
                   trigger: 'blur',
                 },
-               ]">
-                <!-- { pattern: /^[1-9]\d*$/ , message: '暂估值不能小于等于0', trigger: 'blur'} -->
-                <el-input-number
-                  v-model="formData.tentativeEstimates"
-                  :min="0"
-                  :max="99999999999999999"
-                  label=""
-                ></el-input-number>
-              </el-form-item>
-            </el-col>
+              ]"
+            >
+              <!-- { pattern: /^[1-9]\d*$/ , message: '暂估值不能小于等于0', trigger: 'blur'} -->
+              <el-input-number
+                v-model="formData.tentativeEstimates"
+                :min="0"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="type == 1">
+          <el-col :span="12">
+            <el-form-item label="账户简称" prop="ssd">
+              <el-input
+                v-model="formData.simpleName"
+                placeholder="请输入账户简称"
+              ></el-input>
+            </el-form-item>
+          </el-col>
         </el-row>
         <el-row v-if="type == 2">
           <el-col :span="12">
@@ -442,8 +456,8 @@ export default {
   },
   mounted() {},
   methods: {
-    cleanForm(){
-      this.$refs.formData.resetFields()
+    cleanForm() {
+      this.$refs.formData.resetFields();
     },
     //账户类别change事件
     outChange(e) {

src/views/FinancialManagement/ExpenseManagement/ExpenseManagement.vue

@@ -5,140 +5,323 @@
     <el-row class="top">
       <el-form v-model="queryFrom" size="small" label-width="95px" class="form">
         <el-form-item label="账户类别" label-width="95px" prop="outerFlag">
-          <el-select v-model="queryFrom.outerFlag" placeholder="请选择账户类别" clearable>
+          <el-select
+            v-model="queryFrom.outerFlag"
+            placeholder="请选择账户类别"
+            clearable
+          >
             <el-option label="内部账户" value="0"></el-option>
             <el-option label="外部账户" value="1"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="户名" label-width="95px" prop="invCompanyName">
-          <el-input v-model="queryFrom.accountName" placeholder="请输入户名" class="widths" clearable></el-input>
+          <el-input
+            v-model="queryFrom.accountName"
+            placeholder="请输入户名"
+            class="widths"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item label="银行卡号" label-width="95px" prop="invCompanyName">
-          <el-input v-model="queryFrom.bankCardNum" placeholder="请输入银行卡号" class="widths" clearable></el-input>
+          <el-input
+            v-model="queryFrom.bankCardNum"
+            placeholder="请输入银行卡号"
+            class="widths"
+            clearable
+          ></el-input>
         </el-form-item>
         <el-form-item>
-          <kt-button label="查询" type="primary" perms="expenseManagement:accountInformation:query"
-            @click="queryStaffInfo" />
+          <kt-button
+            label="查询"
+            type="primary"
+            perms="expenseManagement:accountInformation:query"
+            @click="queryStaffInfo"
+          />
         </el-form-item>
       </el-form>
     </el-row>
     <!-- 新增 -->
-    <kt-button label="新增账户" type="primary" :plain="true" perms="expenseManagement:accountInformation:add"
-      @click="addAmount" />
-    <kt-button class="operation" label="费用支出明细导出" type="primary" :plain="true"
-      perms="expenseManagement:accountInformation:expenseDetailsImport" @click="expentData" />
-    <kt-button class="operation" label="账户信息导出" type="primary" :plain="true"
-      perms="expenseManagement:accountInformation:accountInformationImport" @click="userInfoExpentData" />
+    <kt-button
+      label="新增账户"
+      type="primary"
+      :plain="true"
+      perms="expenseManagement:accountInformation:add"
+      @click="addAmount"
+    />
+    <kt-button
+      class="operation"
+      label="费用支出明细导出"
+      type="primary"
+      :plain="true"
+      perms="expenseManagement:accountInformation:expenseDetailsImport"
+      @click="expentData"
+    />
+    <kt-button
+      class="operation"
+      label="账户信息导出"
+      type="primary"
+      :plain="true"
+      perms="expenseManagement:accountInformation:accountInformationImport"
+      @click="userInfoExpentData"
+    />
     <!-- 表格 -->
-    <el-table :data="accountData" border size="small" ref="account" :header-cell-style="{
-      background: '#F2F7FC',
-      fontWeight: '900',
-      color: '#606266',
-    }" height="600px" style="width: 100%; margin-top: 30px" @expand-change="handleRowChange">
+    <el-table
+      :data="accountData"
+      border
+      size="small"
+      ref="account"
+      :header-cell-style="{
+        background: '#F2F7FC',
+        fontWeight: '900',
+        color: '#606266',
+      }"
+      height="600px"
+      style="width: 100%; margin-top: 30px"
+      @expand-change="handleRowChange"
+    >
       <el-table-column type="expand">
         <template slot-scope="scope">
-          <el-table :data="scope.row.invAccountCardList" size="small" :header-cell-style="{
-            background: '#ccc',
-            fontWeight: '900',
-            color: '#606266',
-          }" style="width: 100%">
-            <el-table-column type="index" width="50" align="center" label="序号">
+          <el-table
+            :data="scope.row.invAccountCardList"
+            size="small"
+            :header-cell-style="{
+              background: '#ccc',
+              fontWeight: '900',
+              color: '#606266',
+            }"
+            style="width: 100%"
+          >
+            <el-table-column
+              type="index"
+              width="50"
+              align="center"
+              label="序号"
+            >
             </el-table-column>
-            <el-table-column v-for="(childItem, index) in childColums" :key="'child' + index" :prop="childItem.prop"
-              align="center" :label="childItem.label" :min-width="childItem.minWidth">
+            <el-table-column
+              v-for="(childItem, index) in childColums"
+              :key="'child' + index"
+              :prop="childItem.prop"
+              align="center"
+              :label="childItem.label"
+              :min-width="childItem.minWidth"
+            >
             </el-table-column>
-            <el-table-column fixed="right" label="操作" align="center" width="300">
+            <el-table-column
+              fixed="right"
+              label="操作"
+              align="center"
+              width="300"
+            >
               <template slot-scope="scopes">
-                <kt-button label="编辑" size="mini" perms="expenseManagement:accountInformation:bankCardUpdate"
-                  @click="childEdit(scopes.row)" />
-                <kt-button label="删除" type="danger" size="mini"
-                  perms="expenseManagement:accountInformation:bankCardDelete" @click="cardDelete(scopes.row)" />
-                <kt-button label="收入" type="success" size="mini"
+                <kt-button
+                  label="编辑"
+                  size="mini"
+                  perms="expenseManagement:accountInformation:bankCardUpdate"
+                  @click="childEdit(scopes.row)"
+                />
+                <kt-button
+                  label="删除"
+                  type="danger"
+                  size="mini"
+                  perms="expenseManagement:accountInformation:bankCardDelete"
+                  @click="cardDelete(scopes.row)"
+                />
+                <kt-button
+                  label="收入"
+                  type="success"
+                  size="mini"
                   perms="expenseManagement:accountInformation:bankCardIncome"
-                  @click="handleTableIncome(scope.row, scopes.row)" />
-                <kt-button label="支出" type="warning" size="mini"
-                  perms="expenseManagement:accountInformation:bankCardExpenses" @click="handleTableExpend(scopes.row)" />
+                  @click="handleTableIncome(scope.row, scopes.row)"
+                />
+                <kt-button
+                  label="支出"
+                  type="warning"
+                  size="mini"
+                  perms="expenseManagement:accountInformation:bankCardExpenses"
+                  @click="handleTableExpend(scopes.row)"
+                />
               </template>
             </el-table-column>
           </el-table>
         </template>
       </el-table-column>
-      <el-table-column v-for="(dataItem, dataIndex) in columns" :key="dataIndex" :label="dataItem.label"
-        :prop="dataItem.prop" :min-width="dataItem.minWidth" align="center">
+      <el-table-column
+        v-for="(dataItem, dataIndex) in columns"
+        :key="dataIndex"
+        :label="dataItem.label"
+        :prop="dataItem.prop"
+        :min-width="dataItem.minWidth"
+        align="center"
+      >
       </el-table-column>
       <el-table-column fixed="right" label="操作" align="center" width="240">
         <template slot-scope="scope">
-          <kt-button label="编辑" size="mini" perms="expenseManagement:accountInformation:update"
-            @click.native.prevent="handleTableEdit(scope.row, scope)" />
-          <kt-button label="删除" type="danger" size="mini" perms="expenseManagement:accountInformation:delete"
-            @click.native.prevent="handleTableDelete(scope.row)" />
-          <el-tooltip class="item" effect="dark" content="新增卡信息" placement="bottom-end">
-            <kt-button label="新增" type="success" size="mini" perms="expenseManagement:accountInformation:bankCardAdd"
-              @click.native.prevent="handleTableAdd(scope.row)" />
+          <kt-button
+            label="编辑"
+            size="mini"
+            perms="expenseManagement:accountInformation:update"
+            @click.native.prevent="handleTableEdit(scope.row, scope)"
+          />
+          <kt-button
+            label="删除"
+            type="danger"
+            size="mini"
+            perms="expenseManagement:accountInformation:delete"
+            @click.native.prevent="handleTableDelete(scope.row)"
+          />
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="新增卡信息"
+            placement="bottom-end"
+          >
+            <kt-button
+              label="新增"
+              type="success"
+              size="mini"
+              perms="expenseManagement:accountInformation:bankCardAdd"
+              @click.native.prevent="handleTableAdd(scope.row)"
+            />
           </el-tooltip>
         </template>
       </el-table-column>
     </el-table>
-    <el-pagination @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper"
-      @current-change="refreshPageRequest" :current-page="pageRequest.pageNo" :page-size="pageRequest.pageSize"
-      :page-sizes="[20, 50, 100, 200, 300, 400, 500]" :total="pageRequest.totalSize"
-      style="float: left; margin-left: 20px; margin-top: 20px">
+    <el-pagination
+      @size-change="handleSizeChange"
+      layout="total, sizes, prev, pager, next, jumper"
+      @current-change="refreshPageRequest"
+      :current-page="pageRequest.pageNo"
+      :page-size="pageRequest.pageSize"
+      :page-sizes="[20, 50, 100, 200, 300, 400, 500]"
+      :total="pageRequest.totalSize"
+      style="float: left; margin-left: 20px; margin-top: 20px"
+    >
     </el-pagination>
     <!-- 新增修改弹框 -->
-    <expense-component ref="expenseComponent" :type="type" :formData="type == 1 ? accountFormData : accountCardFormData"
-      :formDataId="formDataId" :title="title" :dialogFormVisible="dialogFormVisible"
-      :nature_businessData="nature_businessData" @resetForm="resetForm" @submitForm="submitForm"
-      @setDateInterval="setDateInterval"></expense-component>
+    <expense-component
+      ref="expenseComponent"
+      :type="type"
+      :formData="type == 1 ? accountFormData : accountCardFormData"
+      :formDataId="formDataId"
+      :title="title"
+      :dialogFormVisible="dialogFormVisible"
+      :nature_businessData="nature_businessData"
+      @resetForm="resetForm"
+      @submitForm="submitForm"
+      @setDateInterval="setDateInterval"
+    ></expense-component>
     <!-- 支出弹框 -->
-    <el-dialog class="dialog expendDialog" title="支出信息" :close-on-click-modal="false" :before-close="expendResetForm"
-      :visible.sync="expendDialogVisible" width="60%">
+    <el-dialog
+      class="dialog expendDialog"
+      title="支出信息"
+      :close-on-click-modal="false"
+      :before-close="expendResetForm"
+      :visible.sync="expendDialogVisible"
+      width="60%"
+    >
       <!-- 支出表格 -->
-      <kt-common-table :operationWidth="130" class="ktTable expendTable" ref="expendTable" :data="expendPageResult"
-        :columns="expendColumns" :showBatchDelete="false" :showOperation="true" :button1Name="expendButton1Name"
-        permsButton1="expenseManagement:accountInformation:changeStatus" button2Background="#92D050"
-        button3Background="#f56c6c" button1Icon="el-icon-s-finance" @handleButton1="handleTableConfirm($event)"
-        @findPage="getExpendData" :isshowpagination="true"></kt-common-table>
+      <kt-common-table
+        :operationWidth="130"
+        class="ktTable expendTable"
+        ref="expendTable"
+        :data="expendPageResult"
+        :columns="expendColumns"
+        :showBatchDelete="false"
+        :showOperation="true"
+        :button1Name="expendButton1Name"
+        permsButton1="expenseManagement:accountInformation:changeStatus"
+        button2Background="#92D050"
+        button3Background="#f56c6c"
+        button1Icon="el-icon-s-finance"
+        @handleButton1="handleTableConfirm($event)"
+        @findPage="getExpendData"
+        :isshowpagination="true"
+      ></kt-common-table>
     </el-dialog>
     <!-- 收入弹框 -->
-    <el-dialog class="dialog expendDialog" title="收入信息" :close-on-click-modal="false" :before-close="incomeResetForm"
-      :visible.sync="incomeDialogVisible" width="60%">
-      <el-form :model="inComeFormData" :rules="inComeFormRules" ref="inComeFormData" label-width="130px" size="small"
-        class="inComeForm">
+    <el-dialog
+      class="dialog expendDialog"
+      title="收入信息"
+      :close-on-click-modal="false"
+      :before-close="incomeResetForm"
+      :visible.sync="incomeDialogVisible"
+      width="60%"
+    >
+      <el-form
+        :model="inComeFormData"
+        :rules="inComeFormRules"
+        ref="inComeFormData"
+        label-width="130px"
+        size="small"
+        class="inComeForm"
+      >
         <el-row>
           <el-col :span="12">
             <el-form-item label="转账方" prop="company">
-              <el-select v-model="inComeFormData.company" filterable placeholder="" @change="companyChange">
-                <el-option v-for="item in collectionData" :key="item.bankCardNum" :label="item.name"
-                  :value="item.nameValue">
+              <el-select
+                v-model="inComeFormData.company"
+                filterable
+                placeholder=""
+                @change="companyChange"
+              >
+                <el-option
+                  v-for="item in collectionData"
+                  :key="item.bankCardNum"
+                  :label="item.name"
+                  :value="item.nameValue"
+                >
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="收款方" prop="collectionMessage">
-              <el-input disabled v-model="inComeFormData.collectionMessage" autocomplete="off"></el-input>
+              <el-input
+                disabled
+                v-model="inComeFormData.collectionMessage"
+                autocomplete="off"
+              ></el-input>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="金额" prop="outerFlag">
-              <el-input-number v-model="inComeFormData.applyAmount" :min="0" :precision="2" @blur="chageAppl"
-                :max="99999999999999999" label=""></el-input-number>
+              <el-input-number
+                v-model="inComeFormData.applyAmount"
+                :min="0"
+                :precision="2"
+                @blur="chageAppl"
+                :max="99999999999999999"
+                label=""
+              ></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="大写金额" prop="bigApplyAmount">
-              <el-input v-model="inComeFormData.bigApplyAmount" disabled autocomplete="off"></el-input>
+              <el-input
+                v-model="inComeFormData.bigApplyAmount"
+                disabled
+                autocomplete="off"
+              ></el-input>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row class="collec">
           <el-col :span="24">
             <el-form-item label="资金流向" style="width: 100%">
-              <el-input v-model="inComeFormData.company" disabled autocomplete="off"></el-input>
+              <el-input
+                v-model="inComeFormData.company"
+                disabled
+                autocomplete="off"
+              ></el-input>
               <i class="el-icon-right"></i>
-              <el-input disabled v-model="inComeFormData.collectionMessage" autocomplete="off"></el-input>
+              <el-input
+                disabled
+                v-model="inComeFormData.collectionMessage"
+                autocomplete="off"
+              ></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12"> </el-col>
@@ -146,21 +329,39 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="支付方式" prop="payMethod">
-              <el-select v-model="inComeFormData.payMethod" multiple placeholder="">
-                <el-option v-for="item in payment_methodsData" :key="item.value" :label="item.label" :value="item.value">
+              <el-select
+                v-model="inComeFormData.payMethod"
+                multiple
+                placeholder=""
+              >
+                <el-option
+                  v-for="item in payment_methodsData"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="资金用途" prop="fundUse">
-              <el-cascader v-model="inComeFormData.fundUse" :show-all-levels="true" :clearable="true"
-                :checkStrictly="true" :emitPath="false" placeholder="" :options="fundFlowData" filterable :props="{
+              <el-cascader
+                v-model="inComeFormData.fundUse"
+                :show-all-levels="true"
+                :clearable="true"
+                :checkStrictly="true"
+                :emitPath="false"
+                placeholder=""
+                :options="fundFlowData"
+                filterable
+                :props="{
                   children: 'child',
                   label: 'category',
                   value: 'category',
                   checkStrictly: false,
-                }"></el-cascader>
+                }"
+              ></el-cascader>
             </el-form-item>
           </el-col>
         </el-row>
@@ -174,24 +375,44 @@
         </el-row>
         <el-row class="profit_box">
           <el-col :span="12">
-            <el-form-item v-for="item in affiliationData2" :key="item.profitId + 'sr'" :label="item.profitName"
-              prop="entProfit">
-              <el-input-number v-model="item.profit" :min="0" placeholder="请输入利润" :max="99999999999999"
-                label=""></el-input-number>
+            <el-form-item
+              v-for="item in affiliationData2"
+              :key="item.profitId + 'sr'"
+              :label="item.profitName"
+              prop="entProfit"
+            >
+              <el-input-number
+                v-model="item.profit"
+                :min="0"
+                placeholder="请输入利润"
+                :max="99999999999999"
+                label=""
+              ></el-input-number>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item v-for="item in affiliationData" :key="item.profitId + 'zc'" :label="item.profitName"
-              prop="entProfit">
-              <el-input-number v-model="item.profit" :min="0" placeholder="请输入利润" :max="99999999999999"
-                label=""></el-input-number>
+            <el-form-item
+              v-for="item in affiliationData"
+              :key="item.profitId + 'zc'"
+              :label="item.profitName"
+              prop="entProfit"
+            >
+              <el-input-number
+                v-model="item.profit"
+                :min="0"
+                placeholder="请输入利润"
+                :max="99999999999999"
+                label=""
+              ></el-input-number>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="incomeResetForm()" size="small">取 消</el-button>
-        <el-button type="primary" @click="submitIncomeForm()" size="small">确 定</el-button>
+        <el-button type="primary" @click="submitIncomeForm()" size="small"
+          >确 定</el-button
+        >
       </div>
     </el-dialog>
     <el-dialog
@@ -206,7 +427,13 @@
           <el-radio :label="0">全部</el-radio>
           <el-radio :label="1">部分支出</el-radio>
         </el-radio-group>
-        <el-input v-show="expendRadio" v-model="payOutAmount" placeholder="请输入支出金额" style="width: 200px;margin-left: 20px;" size="small"></el-input>
+        <el-input
+          v-show="expendRadio"
+          v-model="payOutAmount"
+          placeholder="请输入支出金额"
+          style="width: 200px; margin-left: 20px"
+          size="small"
+        ></el-input>
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="closeExpenditure" size="small">取 消</el-button>
@@ -236,11 +463,11 @@ export default {
     this.business("nature_business"); //营业性质字典
     this.getTreeList(); //获取资金用途字典
   },
-  mounted() { },
+  mounted() {},
   data() {
     return {
       expenditureRow: {},
-      payOutAmount: 0,    // 已转金额
+      payOutAmount: 0, // 已转金额
       expendRadio: 0,
       expenditureVisible: false,
       type: 1, //1为账户信息，2为卡信息 账户和卡判断条件
@@ -510,6 +737,7 @@ export default {
         owned: "", //所属地
         biller: "", //开票员
         tentativeEstimates: "", //暂估值
+        simpleName: "", //账户简称
       },
       //账户卡信息form
       accountCardFormData: {
@@ -842,41 +1070,44 @@ export default {
     },
     // 确定支出
     submitFormExpend() {
-      const num = this.expenditureRow.applyAmount - this.expenditureRow.payoutAmount
+      const num =
+        this.expenditureRow.applyAmount - this.expenditureRow.payoutAmount;
       if (num == 0) {
-        this.$message.error('支出金额不足')
-        return
+        this.$message.error("支出金额不足");
+        return;
       }
       if (this.payOutAmount > num) {
-        this.$message.error('支出金额不足')
-        return
+        this.$message.error("支出金额不足");
+        return;
       }
       if (!this.expendRadio) {
-        this.payOutAmount = num
+        this.payOutAmount = num;
       }
-      this.$api.expense.updateExpenditure({
-        excelAccountOperateId: this.expenditureRow.excelAccountOperateId,
-        payOutAmount: this.payOutAmount
-      }).then((res) => {
-        if (res.code == 200) {
-          this.$message.success('支出成功')
-          this.queryStaffInfo()
-          this.closeExpenditure()
-        } else {
-          this.$message.error(res.msg)
-        }
-      })
+      this.$api.expense
+        .updateExpenditure({
+          excelAccountOperateId: this.expenditureRow.excelAccountOperateId,
+          payOutAmount: this.payOutAmount,
+        })
+        .then((res) => {
+          if (res.code == 200) {
+            this.$message.success("支出成功");
+            this.queryStaffInfo();
+            this.closeExpenditure();
+          } else {
+            this.$message.error(res.msg);
+          }
+        });
     },
     closeExpenditure() {
-      this.expenditureRow = {}
-      this.payOutAmount = 0
-      this.expendRadio = 0
-      this.expenditureVisible = false
+      this.expenditureRow = {};
+      this.payOutAmount = 0;
+      this.expendRadio = 0;
+      this.expenditureVisible = false;
     },
     //弹框确认支出按钮事件
     handleTableConfirm(e) {
-      this.expenditureRow = e.row
-      this.expenditureVisible = true
+      this.expenditureRow = e.row;
+      this.expenditureVisible = true;
       // this.$confirm("确认把该条数据设为已转账状态吗?", "提示", {
       //   type: "warning",
       // })
@@ -906,7 +1137,7 @@ export default {
       }
     },
     //获取支出页面列表数据
-    expendFindPage(data) { },
+    expendFindPage(data) {},
     //获取页面列表数据
     findPage(data) {
       if (data && data.pageRequest) {
@@ -997,7 +1228,7 @@ export default {
             }
           });
         })
-        .catch(() => { });
+        .catch(() => {});
     },
     //账户删除数据事件
     handleTableDelete(row) {
@@ -1014,7 +1245,7 @@ export default {
             }
           });
         })
-        .catch(() => { });
+        .catch(() => {});
     },
     //收入弹框取消重置
     incomeResetForm() {
@@ -1261,11 +1492,11 @@ export default {
     left: 0; */
 }
 
-.addremove-box>i {
+.addremove-box > i {
   cursor: pointer;
 }
 
-.frame>>>.el-date-editor {
+.frame >>> .el-date-editor {
   width: 100%;
 }
 
@@ -1273,40 +1504,40 @@ export default {
   width: 200px;
 }
 
-.ktTable>>>.el-button span {
+.ktTable >>> .el-button span {
   margin-left: 0;
 }
 
-.expendTable>>>.bottomFixed {
+.expendTable >>> .bottomFixed {
   position: static;
   margin-top: 20px;
 }
 
-.expendTable>>>.el-table {
+.expendTable >>> .el-table {
   height: 400px !important;
 }
 
-.expendDialog>>>.el-dialog__body {
+.expendDialog >>> .el-dialog__body {
   overflow-y: auto;
   height: 500px;
 }
 
-.collec>>>.el-form-item__content {
+.collec >>> .el-form-item__content {
   display: flex;
   align-items: center;
 }
 
-.inComeForm>>>.el-input-number__decrease,
-.inComeForm>>>.el-input-number__increase {
+.inComeForm >>> .el-input-number__decrease,
+.inComeForm >>> .el-input-number__increase {
   display: none;
 }
 
-.inComeForm>>>.el-input-number,
-.inComeForm>>>.el-cascader {
+.inComeForm >>> .el-input-number,
+.inComeForm >>> .el-cascader {
   width: 100%;
 }
 
-.inComeForm>>>.el-input.is-disabled .el-input__inner {
+.inComeForm >>> .el-input.is-disabled .el-input__inner {
   background-color: #fff;
   color: #606266;
 }
@@ -1316,11 +1547,11 @@ export default {
   font-size: 20px;
 }
 
-.ktTable>>>.cell .el-button {
+.ktTable >>> .cell .el-button {
   width: 80px;
 }
 
-.expendDialog>>>.cell .el-button {
+.expendDialog >>> .cell .el-button {
   width: auto;
 }