Merge branch 'master' into dev0.3

src/components/byForm/index.vue

@@ -18,7 +18,7 @@
           v-if="i.isShow || i.isShow == undefined && i.type"
           :style="
             i.type == 'title'
-              ? 'width:100%'
+              ? 'width:100%;display:none'
               : i.itemWidth
               ? 'width:' + i.itemWidth + '%'
               : formOption.itemWidth
@@ -69,7 +69,7 @@
                 v-model="formData[i.selectProp]"
                 :placeholder="i.selectPlaceholder || $t('common.pleaseSelect')"
                 @change="(e) => commonsEmit(e, i)"
-                :disabled="i.disabled ? i.disabled : false"
+                :disabled="i.disabled || i.selectDisabled ? true : false"
                 :readonly="i.readonly ? i.readonly : false"
                 style="width: 80px">
                 <el-option :label="j.title || j.name || j.label" :value="j.id || j.value" v-for="j in i.data" :key="j.id"> </el-option>

src/components/byTable/index.vue

@@ -5,7 +5,7 @@
         v-for="(item, index) in getActionList"
         :key="index"
         :type="item.type || 'primary'"
-        :plain="item.plain || false"
+        :plain="item.plain ? item.plain : index != 0"
         v-bind="getHeaderActions(item)"
         @click="item.action"
         :disabled="item.disabled || false"

src/views/finance/fundManage/accountStatement/index.vue

@@ -10,14 +10,14 @@
         highlight-current-row
         :action-list="[
           {
-            text: '添加借款',
-            action: () => addloan(),
-          },
-          {
             text: '导出Excel',
             action: () => deriveExcel(),
           },
           {
+            text: '添加借款',
+            action: () => addloan(),
+          },
+          {
             text: '内部转账',
             action: () => openTransferMoney('add'),
           },
@@ -97,7 +97,7 @@
     </el-dialog>
     <!-- 结汇 -->
     <el-dialog
-      title="结汇" 
+      title="结汇"
       v-if="settlementModal"
       v-model="settlementModal"
       width="600"
@@ -107,13 +107,15 @@
         :formConfig="settlementFormConfig"
         :formOption="formOption"
         v-model="formData3.data"
-        :rules="rules"
-        ref="submit"
+        :rules="rules3"
+        ref="submit3"
       >
       </byForm>
       <template #footer>
-        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
-        <el-button type="primary" @click="submitForm()" size="large"
+        <el-button @click="settlementModal = false" size="large"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="settlementSubmitForm()" size="large"
           >确 定</el-button
         >
       </template>
@@ -332,8 +334,7 @@
         <template #loanUserName>
           <div style="width: 100%">
             <el-autocomplete
-              v-model="formData.loanData.loanUserName"
-              value-key="loanUserName"
+              v-model="formData.data.loanUserName"
               :fetch-suggestions="querySearch"
               :disabled="submitType == 'edit'"
               clearable
@@ -372,6 +373,7 @@ const { proxy } = getCurrentInstance();
 const accountCurrency = ref([]);
 const accountList = ref([]);
 const contractList = ref([]);
+const contractList2 = ref([]);
 const corporationList = ref([]);
 const status = ref([
   {
@@ -737,9 +739,29 @@ const getDict = () => {
   proxy
     .post("/contract/page", { pageNum: 1, pageSize: 9999, status: 30 })
     .then((res) => {
-      contractList.value = res.rows;
+      contractList.value = res.rows.map((item) => {
+        return {
+          ...item,
+          label: item.code,
+          value: item.id,
+        };
+      });
+    });
+  proxy
+    .post("/contract/page1", {
+      pageNum: 1,
+      pageSize: 9999,
+      isExchangeSettlement: 0,
+    })
+    .then((res) => {
+      contractList2.value = res.rows.map((item) => {
+        return {
+          ...item,
+          label: item.code,
+          value: item.id,
+        };
+      });
     });
-
   proxy.post("/corporation/page", { pageNum: 1, pageSize: 999 }).then((res) => {
     if (res.rows && res.rows.length > 0) {
       corporationList.value = res.rows.map((item) => {
@@ -792,20 +814,69 @@ const formData = reactive({
 
 const settlementModal = ref(false);
 const openSettlementModal = (type, row) => {
-  modalType.value = type;
-  if (type == "add") {
-    formData2.data = {
-      transactionTime: moment().format("yyyy-MM-DD HH:mm:ss"),
-    };
-  } else {
-    formData2.data = { ...row };
-  }
+  formData3.data = {
+    accountManagementId: null,
+    amount: null,
+    currency: null,
+    inAccountManagementId: null,
+    inAmount: null,
+    inCurrency: "CNY",
+    rate: null,
+    commissionAmount: null,
+    commissionCurrency: null,
+    remarks: null,
+    businessId: null,
+  };
   settlementModal.value = true;
 };
 
 const formData3 = reactive({
-  data: {},
+  data: {
+    accountManagementId: null,
+    amount: null,
+    currency: null,
+    inAccountManagementId: null,
+    inAmount: null,
+    inCurrency: "CNY",
+    rate: null,
+    commissionAmount: null,
+    commissionCurrency: null,
+    remarks: null,
+    businessId: null,
+  },
 });
+const submit3 = ref(null);
+const settlementSubmitForm = () => {
+  submit3.value.handleSubmit(() => {
+    //汇出汇入账号不能相同
+    if (
+      formData3.data.accountManagementId ===
+      formData3.data.inAccountManagementId
+    ) {
+      ElMessage({
+        message: "汇出汇入账号不能相同",
+        type: "error",
+      });
+      return;
+    }
+    loadingDialog.value = true;
+
+    proxy.post("/accountRunningWater/exchangeSettlement", formData3.data).then(
+      () => {
+        ElMessage({
+          message: "结汇成功",
+          type: "success",
+        });
+        settlementModal.value = false;
+        getList();
+      },
+      (err) => {
+        console.log(err);
+        loadingDialog.value = false;
+      }
+    );
+  });
+};
 
 const settlementFormConfig = computed(() => {
   return [
@@ -831,7 +902,6 @@ const settlementFormConfig = computed(() => {
       fn: (value) => {
         //判断value的类型
         if (isNaN(value)) {
-          formData3.data.inCurrency = formData3.data.currency;
           formData3.data.commissionCurrency = formData3.data.currency;
         } else {
           if (value != "") {
@@ -843,6 +913,11 @@ const settlementFormConfig = computed(() => {
           }
           formData3.data.inAmount = formData3.data.amount;
         }
+        if (formData3.data.amount && formData3.data.inAmount) {
+          formData3.data.rate = (
+            formData3.data.inAmount / formData3.data.amount
+          ).toFixed(4);
+        }
       },
     },
     {
@@ -853,9 +928,10 @@ const settlementFormConfig = computed(() => {
     },
     {
       type: "selectInput",
-      label: "汇出金额",
+      label: "汇入金额",
       prop: "inAmount",
       itemWidth: 60,
+      selectDisabled: true,
       data: accountCurrency.value,
       placeholder: "请输入",
       selectPlaceholder: "币种",
@@ -863,7 +939,6 @@ const settlementFormConfig = computed(() => {
       fn: (value) => {
         //判断value的类型
         if (isNaN(value)) {
-          formData2.data.inCurrency = formData2.data.currency;
           formData2.data.commissionCurrency = formData2.data.currency;
         } else {
           if (value != "") {
@@ -875,6 +950,11 @@ const settlementFormConfig = computed(() => {
           }
           formData2.data.inAmount = formData2.data.amount;
         }
+        if (formData3.data.amount && formData3.data.inAmount) {
+          formData3.data.rate = (
+            formData3.data.inAmount / formData3.data.amount
+          ).toFixed(4);
+        }
       },
     },
     {
@@ -882,6 +962,7 @@ const settlementFormConfig = computed(() => {
       prop: "rate",
       label: "汇率",
       itemType: "text",
+      disabled: true,
     },
     {
       type: "selectInput",
@@ -893,6 +974,24 @@ const settlementFormConfig = computed(() => {
       selectPlaceholder: "币种",
       selectProp: "commissionCurrency",
     },
+    {
+      type: "input",
+      prop: "remarks",
+      label: "摘要",
+      itemType: "textarea",
+    },
+    //关联合同
+    {
+      type: "title",
+      title: "关联合同",
+    },
+    {
+      type: "select",
+      prop: "businessId",
+      label: "选择合同",
+      filterable: true,
+      data: contractList2.value,
+    },
   ];
 });
 const formConfig = computed(() => {
@@ -1148,6 +1247,45 @@ const rules = ref({
   // accountOpening: [{ required: true, message: "请输入银行账号", trigger: "blur" }],
 });
 
+const validatePass4 = (rule, value, callback) => {
+  console.log(formData3.data.currency);
+  if (!formData3.data.currency) {
+    callback(new Error("请输入金额和选择币种"));
+  } else {
+    callback();
+  }
+};
+
+const validatePass3 = (rule, value, callback) => {
+  if (!formData3.data.inCurrency) {
+    callback(new Error("请输入金额和选择币种"));
+  } else {
+    callback();
+  }
+};
+
+const rules3 = ref({
+  accountManagementId: [
+    { required: true, message: "请选择账户", trigger: "change" },
+  ],
+  currency: [{ required: true, message: "请选择币种", trigger: "change" }],
+  received: [
+    { required: true, message: "请选择合同是否到账", trigger: "change" },
+  ],
+  amount: [
+    { required: true, message: "请输入金额和选择币种", trigger: "blur" },
+    { required: true, validator: validatePass4, trigger: "blur" },
+  ],
+  inAccountManagementId: [
+    { required: true, message: "请选择账户", trigger: "change" },
+  ],
+  inAmount: [
+    { required: true, message: "请输入金额和选择币种", trigger: "blur" },
+    { required: true, validator: validatePass3, trigger: "blur" },
+  ],
+  businessId: [{ required: true, message: "请选择合同", trigger: "change" }],
+});
+
 const rules2 = ref({
   accountManagementId: [
     { required: true, message: "请选择账户", trigger: "change" },
@@ -1517,28 +1655,27 @@ const openLoanDialog = ref(false);
 const byform = ref(null);
 const submitLoading = ref(false);
 const submitType = ref("add");
-const historyData = ref([]);
 const addloan = () => {
-  proxy.get("/loanInfo/getLoanUserList").then((res) => {
-    historyData.value = res.data;
-  });
   formData.loanData = {};
   openLoanDialog.value = true;
 };
 
-const querySearch = (queryString, cb) => {
-  const results = queryString
-    ? historyData.value.filter(createFilter(queryString))
-    : historyData.value;
-  cb(results);
-};
-
-const createFilter = (queryString) => {
-  return (restaurant) => {
-    return (
-      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-    );
-  };
+const querySearch = (queryString, callback) => {
+  proxy
+    .post("/loanInfo/getLoanUserList", { keyword: queryString })
+    .then((res) => {
+      if (res && res.length > 0) {
+        res = res.map((item) => {
+          return {
+            ...item,
+            value: item.loanUserName,
+          };
+        });
+        callback(res);
+      } else {
+        callback([]);
+      }
+    });
 };
 
 const handleSubmitLoan = () => {

src/views/finance/fundManage/flow/index.vue

@@ -10,14 +10,15 @@
         highlight-current-row
         :action-list="[
           {
-            text: '添加借款',
-            action: () => addloan(),
-          },
-          {
             text: '导出Excel',
             action: () => deriveExcel(),
           },
           {
+            text: '添加借款',
+            action: () => addloan(),
+          },
+
+          {
             text: '添加流水',
             action: () => openModal('add'),
           },
@@ -25,6 +26,10 @@
             text: '内部转账',
             action: () => openTransferMoney('add'),
           },
+          {
+            text: '结汇',
+            action: () => openSettlementModal('add'),
+          },
         ]"
         @moreSearch="moreSearch"
         @get-list="getList"
@@ -288,8 +293,7 @@
         <template #loanUserName>
           <div style="width: 100%">
             <el-autocomplete
-              v-model="formData.loanData.loanUserName"
-              value-key="loanUserName"
+              v-model="formData.data.loanUserName"
               :fetch-suggestions="querySearch"
               :disabled="submitType == 'edit'"
               clearable
@@ -312,6 +316,31 @@
         >
       </template>
     </el-dialog>
+    <!-- 结汇 -->
+    <el-dialog
+      title="结汇"
+      v-if="settlementModal"
+      v-model="settlementModal"
+      width="600"
+      v-loading="loadingDialog"
+    >
+      <byForm
+        :formConfig="settlementFormConfig"
+        :formOption="formOption"
+        v-model="formData3.data"
+        :rules="rules3"
+        ref="submit3"
+      >
+      </byForm>
+      <template #footer>
+        <el-button @click="settlementModal = false" size="large"
+          >取 消</el-button
+        >
+        <el-button type="primary" @click="settlementSubmitForm()" size="large"
+          >确 定</el-button
+        >
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -366,6 +395,231 @@ const sourceList = ref({
     remarks: "",
   },
 });
+
+//结汇
+const contractList2 = ref([]);
+const settlementModal = ref(false);
+const openSettlementModal = (type, row) => {
+  formData3.data = {
+    accountManagementId: null,
+    amount: null,
+    currency: null,
+    inAccountManagementId: null,
+    inAmount: null,
+    inCurrency: "CNY",
+    rate: null,
+    commissionAmount: null,
+    commissionCurrency: null,
+    remarks: null,
+    businessId: null,
+  };
+  settlementModal.value = true;
+};
+
+const validatePass4 = (rule, value, callback) => {
+  console.log(formData3.data.currency);
+  if (!formData3.data.currency) {
+    callback(new Error("请输入金额和选择币种"));
+  } else {
+    callback();
+  }
+};
+
+const validatePass3 = (rule, value, callback) => {
+  if (!formData3.data.inCurrency) {
+    callback(new Error("请输入金额和选择币种"));
+  } else {
+    callback();
+  }
+};
+
+const rules3 = ref({
+  accountManagementId: [
+    { required: true, message: "请选择账户", trigger: "change" },
+  ],
+  currency: [{ required: true, message: "请选择币种", trigger: "change" }],
+  received: [
+    { required: true, message: "请选择合同是否到账", trigger: "change" },
+  ],
+  amount: [
+    { required: true, message: "请输入金额和选择币种", trigger: "blur" },
+    { required: true, validator: validatePass4, trigger: "blur" },
+  ],
+  inAccountManagementId: [
+    { required: true, message: "请选择账户", trigger: "change" },
+  ],
+  inAmount: [
+    { required: true, message: "请输入金额和选择币种", trigger: "blur" },
+    { required: true, validator: validatePass3, trigger: "blur" },
+  ],
+  businessId: [{ required: true, message: "请选择合同", trigger: "change" }],
+});
+
+const formData3 = reactive({
+  data: {
+    accountManagementId: null,
+    amount: null,
+    currency: null,
+    inAccountManagementId: null,
+    inAmount: null,
+    inCurrency: "CNY",
+    rate: null,
+    commissionAmount: null,
+    commissionCurrency: null,
+    remarks: null,
+    businessId: null,
+  },
+});
+const submit3 = ref(null);
+const settlementSubmitForm = () => {
+  submit3.value.handleSubmit(() => {
+    //汇出汇入账号不能相同
+    if (
+      formData3.data.accountManagementId ===
+      formData3.data.inAccountManagementId
+    ) {
+      ElMessage({
+        message: "汇出汇入账号不能相同",
+        type: "error",
+      });
+      return;
+    }
+    loadingDialog.value = true;
+    proxy.post("/accountRunningWater/exchangeSettlement", formData3.data).then(
+      () => {
+        ElMessage({
+          message: "结汇成功",
+          type: "success",
+        });
+        settlementModal.value = false;
+        getList();
+      },
+      (err) => {
+        console.log(err);
+        loadingDialog.value = false;
+      }
+    );
+  });
+};
+
+const settlementFormConfig = computed(() => {
+  return [
+    {
+      type: "title",
+      title: "结汇信息",
+    },
+    {
+      type: "select",
+      prop: "accountManagementId",
+      label: "汇出账户",
+      data: accountList.value,
+    },
+    {
+      type: "selectInput",
+      label: "汇出金额",
+      prop: "amount",
+      itemWidth: 60,
+      data: accountCurrency.value,
+      placeholder: "请输入",
+      selectPlaceholder: "币种",
+      selectProp: "currency",
+      fn: (value) => {
+        console.log(formData3.data);
+        //判断value的类型
+        if (isNaN(value)) {
+          formData3.data.commissionCurrency = formData3.data.currency;
+        } else {
+          if (value != "") {
+            if (value.indexOf(".") > -1) {
+              formData3.data.amount = value.slice(0, value.indexOf(".") + 3);
+            } else {
+              formData3.data.amount = value;
+            }
+          }
+          formData3.data.inAmount = formData3.data.amount;
+        }
+        if (formData3.data.amount && formData3.data.inAmount) {
+          formData3.data.rate = (
+            formData3.data.inAmount / formData3.data.amount
+          ).toFixed(4);
+        }
+      },
+    },
+    {
+      type: "select",
+      prop: "inAccountManagementId",
+      label: "汇入账户",
+      data: accountList.value,
+    },
+    {
+      type: "selectInput",
+      label: "汇入金额",
+      prop: "inAmount",
+      itemWidth: 60,
+      data: accountCurrency.value,
+      placeholder: "请输入",
+      selectPlaceholder: "币种",
+      selectDisabled: true,
+      selectProp: "inCurrency",
+      fn: (value) => {
+        //判断value的类型
+        if (isNaN(value)) {
+          formData2.data.commissionCurrency = formData2.data.currency;
+        } else {
+          if (value != "") {
+            if (value.indexOf(".") > -1) {
+              formData2.data.amount = value.slice(0, value.indexOf(".") + 3);
+            } else {
+              formData2.data.amount = value;
+            }
+          }
+          formData2.data.inAmount = formData2.data.amount;
+        }
+        if (formData3.data.amount && formData3.data.inAmount) {
+          formData3.data.rate = (
+            formData3.data.inAmount / formData3.data.amount
+          ).toFixed(4);
+        }
+      },
+    },
+    {
+      type: "input",
+      prop: "rate",
+      label: "汇率",
+      itemType: "text",
+      disabled: true,
+    },
+    {
+      type: "selectInput",
+      label: "手续费",
+      prop: "commissionAmount",
+      itemWidth: 60,
+      data: accountCurrency.value,
+      placeholder: "请输入",
+      selectPlaceholder: "币种",
+      selectProp: "commissionCurrency",
+    },
+    {
+      type: "input",
+      prop: "remarks",
+      label: "摘要",
+      itemType: "textarea",
+    },
+    //关联合同
+    {
+      type: "title",
+      title: "关联合同",
+    },
+    {
+      type: "select",
+      prop: "businessId",
+      label: "选择合同",
+      filterable: true,
+      data: contractList2.value,
+    },
+  ];
+});
+
 const loading = ref(false);
 const selectConfig = computed(() => {
   return [
@@ -523,7 +777,21 @@ const getDict = () => {
         });
       }
     });
-
+  proxy
+    .post("/contract/page1", {
+      pageNum: 1,
+      pageSize: 9999,
+      isExchangeSettlement: 0,
+    })
+    .then((res) => {
+      contractList2.value = res.rows.map((item) => {
+        return {
+          ...item,
+          label: item.code,
+          value: item.id,
+        };
+      });
+    });
   proxy.post("/corporation/page", { pageNum: 1, pageSize: 999 }).then((res) => {
     if (res.rows && res.rows.length > 0) {
       corporationList.value = res.rows.map((item) => {
@@ -1295,28 +1563,27 @@ const openLoanDialog = ref(false);
 const byform = ref(null);
 const submitLoading = ref(false);
 const submitType = ref("add");
-const historyData = ref([]);
 const addloan = () => {
-  proxy.get("/loanInfo/getLoanUserList").then((res) => {
-    historyData.value = res.data;
-  });
   formData.loanData = {};
   openLoanDialog.value = true;
 };
 
-const querySearch = (queryString, cb) => {
-  const results = queryString
-    ? historyData.value.filter(createFilter(queryString))
-    : historyData.value;
-  cb(results);
-};
-
-const createFilter = (queryString) => {
-  return (restaurant) => {
-    return (
-      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-    );
-  };
+const querySearch = (queryString, callback) => {
+  proxy
+    .post("/loanInfo/getLoanUserList", { keyword: queryString })
+    .then((res) => {
+      if (res && res.length > 0) {
+        res = res.map((item) => {
+          return {
+            ...item,
+            value: item.loanUserName,
+          };
+        });
+        callback(res);
+      } else {
+        callback([]);
+      }
+    });
 };
 
 const handleSubmitLoan = () => {

src/views/finance/fundManage/loan/index.vue

@@ -50,10 +50,9 @@
           <div style="width: 100%">
             <el-autocomplete
               v-model="formData.data.loanUserName"
-              value-key="loanUserName"
-              clearable
               :fetch-suggestions="querySearch"
               :disabled="submitType == 'edit'"
+              clearable
               class="inline-input w-50"
               placeholder="请输入"
             />
@@ -481,29 +480,28 @@ const openAddDialog = ref(false);
 const byform = ref(null);
 const submitLoading = ref(false);
 const submitType = ref("add");
-const historyData = ref([]);
 const openModal = () => {
-  proxy.get("/loanInfo/getLoanUserList").then((res) => {
-    historyData.value = res.data;
-  });
   submitType.value = "add";
   formData.data = {};
   openAddDialog.value = true;
 };
 
-const querySearch = (queryString, cb) => {
-  const results = queryString
-    ? historyData.value.filter(createFilter(queryString))
-    : historyData.value;
-  cb(results);
-};
-
-const createFilter = (queryString) => {
-  return (restaurant) => {
-    return (
-      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-    );
-  };
+const querySearch = (queryString, callback) => {
+  proxy
+    .post("/loanInfo/getLoanUserList", { keyword: queryString })
+    .then((res) => {
+      if (res && res.length > 0) {
+        res = res.map((item) => {
+          return {
+            ...item,
+            value: item.loanUserName,
+          };
+        });
+        callback(res);
+      } else {
+        callback([]);
+      }
+    });
 };
 
 const handleSubmit = () => {

src/views/salesMange/salesMange/performance/index.vue

@@ -1,183 +1,203 @@
 <template>
   <div class="tenant">
-    <div class="content">
-      <div style="padding: 20px 0 0 20px">
-        <el-form :inline="true" :model="queryForm">
-          <el-form-item label="年份">
-            <el-date-picker
-              v-model="queryForm.time"
-              type="year"
-              placeholder="请选择"
-              format="YYYY"
-              value-format="YYYY"
-              clearable
-              @change="onQuery"
-            />
-          </el-form-item>
-          <el-form-item label="业务员">
-            <el-select
-              v-model="queryForm.userId"
-              placeholder="请选择"
-              clearable
-              @change="onQuery"
+    <div style="padding: 20px 0 0 20px; background: #fff">
+      <el-form :inline="true" :model="queryForm">
+        <el-form-item label="年份">
+          <el-date-picker
+            v-model="queryForm.time"
+            type="year"
+            placeholder="请选择"
+            format="YYYY"
+            value-format="YYYY"
+            clearable
+            @change="onQuery"
+          />
+        </el-form-item>
+        <el-form-item label="业务员">
+          <el-select
+            v-model="queryForm.userId"
+            placeholder="请选择"
+            clearable
+            @change="onQuery"
+          >
+            <el-option
+              v-for="item in userList"
+              :label="item.label"
+              :value="item.value"
+              :key="item.value"
             >
-              <el-option
-                v-for="item in userList"
-                :label="item.label"
-                :value="item.value"
-                :key="item.value"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="onQuery">搜索</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-      <byTable
-        :hideTable="true"
-        :hidePagination="true"
-        :source="sourceList.data"
-        :pagination="sourceList.pagination"
-        :config="config"
-        :loading="loading"
-        :statConfig="statConfig"
-        :selectConfig="selectConfig"
-        highlight-current-row
-        :action-list="[]"
-        @get-list="getList"
-      >
-        <template #amount="{ item }">
-          <div></div>
-        </template>
-      </byTable>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onQuery">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="margin: 20px 0; padding: 0 20px; background: #fff">
       <div
-        style="padding: 0 20px 20px 20px; background-color: white"
-        v-if="rateStatus"
+        style="
+          color: #000;
+          font-size: 14px;
+          font-weight: 700;
+          height: 60px;
+          line-height: 60px;
+        "
       >
-        <el-table v-loading="loading" :data="sourceList.data">
-          <el-table-column label="合同编号">
-            <el-table-column label="" prop="contractCode" width="160">
-              <template #default="{ row }">
-                <div style="width: 100%">
-                  <a
-                    style="
-                      color: #409eff;
-                      cursor: pointer;
-                      word-break: break-all;
-                    "
-                    @click="openDetails(row)"
-                    >{{ row.contractCode }}</a
-                  >
-                </div>
-              </template>
-            </el-table-column>
-          </el-table-column>
-          <el-table-column label="客户名称">
-            <el-table-column label="" prop="customerName" min-width="200" />
-          </el-table-column>
-          <el-table-column label="业务员">
-            <el-table-column label="" prop="userName" width="120" />
-          </el-table-column>
-          <el-table-column label="销售合同金额">
-            <el-table-column label="" prop="contractAmount" width="120">
-              <template #default="{ row }">
-                <div style="width: 100%">
-                  {{ row.contractCurrency }}
-                  {{ moneyFormat(row.contractAmount, 2) }}
-                </div>
-              </template>
-            </el-table-column>
-          </el-table-column>
-          <el-table-column label="收入">
-            <el-table-column
-              label="合同到账"
-              prop="contractArrival"
-              width="120"
-            />
-            <el-table-column label="退税" prop="taxReturnAmount" width="120" />
-            <el-table-column label="其他收入" prop="otherIncome" width="120" />
-          </el-table-column>
-          <el-table-column label="采购合同金额">
-            <el-table-column label="" prop="purchaseAmount" width="120">
-              <template #default="{ row }">
-                <div style="width: 100%">
-                  {{ row.purchaseCurrency }}
-                  {{ moneyFormat(row.purchaseAmount, 2) }}
-                </div>
-              </template>
-            </el-table-column>
-          </el-table-column>
-          <el-table-column label="支出">
-            <el-table-column label="支付货款" prop="payForGoods" width="120" />
-            <el-table-column
-              label="其他支出"
-              prop="otherExpenses"
-              width="120"
-            />
-          </el-table-column>
-          <el-table-column label="统计">
-            <el-table-column label="收入合计" prop="totalIncome" width="120" />
-            <el-table-column
-              label="支出合计"
-              prop="totalExpenses"
-              width="120"
-            />
-            <el-table-column label="毛利" prop="grossGrofit" width="120" />
-            <el-table-column label="毛利率" prop="grossRofitMargin" width="120">
-              <template #default="{ row }">
-                <div style="width: 100%">{{ row.grossRofitMargin }}%</div>
-              </template></el-table-column
-            >
+        统计
+      </div>
+
+      <ul id="ul-box">
+        <li
+          v-for="(i, index) in statConfig[0].data"
+          v-show="i.data"
+          :key="index"
+          class="multi-data"
+          :class="'theme' + i.type"
+          @click="i.click ? i.click(i, index) : ''"
+          :style="i.click ? 'cursor: pointer' : ''"
+        >
+          <div class="label">{{ i.label }}</div>
+          <div class="num-warp">
+            <div class="num-box" v-for="(j, jindex) in i.data" :key="jindex">
+              <div class="num-small" :style="'color:' + j.color">
+                {{ j.num }}
+              </div>
+              <div class="label-small">{{ j.label }}</div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div
+      style="padding: 0 20px 20px 20px; background-color: white"
+      v-if="rateStatus"
+    >
+      <div class="by-search">
+        <div></div>
+        <div style="display: flex; margin-top: 15px">
+          <el-input
+            :placeholder="$t('common.pleaseEnterKeywords')"
+            suffix-icon="search"
+            size="mini"
+            v-model="sourceList.pagination.keyword"
+            @keyup.enter="getList"
+          >
+          </el-input>
+          <el-button
+            type="primary"
+            style="margin-left: 10px"
+            size="default"
+            v-no-double-click="getList"
+            >{{ $t("common.search") }}</el-button
+          >
+          <!-- <div class="more-icon">
+            <i class="iconfont icon-iconx_saixuan"></i>
+          </div> -->
+        </div>
+      </div>
+
+      <el-table v-loading="loading" :data="sourceList.data">
+        <el-table-column label="合同编号">
+          <el-table-column label="" prop="contractCode" width="160">
+            <template #default="{ row }">
+              <div style="width: 100%">
+                <a
+                  style="color: #409eff; cursor: pointer; word-break: break-all"
+                  @click="openDetails(row)"
+                  >{{ row.contractCode }}</a
+                >
+              </div>
+            </template>
           </el-table-column>
-          <el-table-column label="提成">
-            <el-table-column label="售后" prop="afterSalesAmount" width="120" />
-            <el-table-column label="公共" prop="publicAmount" width="120" />
-            <el-table-column
-              label="总办"
-              prop="haveOverallAmount"
-              width="120"
-            />
-            <el-table-column
-              label="部门提成"
-              prop="departmentalCommission"
-              width="120"
-            />
-            <el-table-column
-              label="个人提成"
-              prop="personalCommission"
-              width="120"
-            />
+        </el-table-column>
+        <el-table-column label="客户名称">
+          <el-table-column label="" prop="customerName" min-width="200" />
+        </el-table-column>
+        <el-table-column label="业务员">
+          <el-table-column label="" prop="userName" width="120" />
+        </el-table-column>
+        <el-table-column label="销售合同金额">
+          <el-table-column label="" prop="contractAmount" width="120">
+            <template #default="{ row }">
+              <div style="width: 100%">
+                {{ row.contractCurrency }}
+                {{ moneyFormat(row.contractAmount, 2) }}
+              </div>
+            </template>
           </el-table-column>
+        </el-table-column>
+        <el-table-column label="收入">
           <el-table-column
-            label="操作"
-            align="center"
-            width="100"
-            fixed="right"
-          >
+            label="合同到账"
+            prop="contractArrival"
+            width="120"
+          />
+          <el-table-column label="退税" prop="taxReturnAmount" width="120" />
+          <el-table-column label="其他收入" prop="otherIncome" width="120" />
+        </el-table-column>
+        <el-table-column label="采购合同金额">
+          <el-table-column label="" prop="purchaseAmount" width="120">
             <template #default="{ row }">
-              <div>
-                <el-button type="primary" @click="changeExchangeRate(row)" link
-                  >调整</el-button
-                >
+              <div style="width: 100%">
+                {{ row.purchaseCurrency }}
+                {{ moneyFormat(row.purchaseAmount, 2) }}
               </div>
             </template>
           </el-table-column>
-        </el-table>
-      </div>
-      <el-row style="padding: 20px" justify="end" type="flex">
-        <el-pagination
-          background
-          layout="total, sizes, prev, pager, next, jumper"
-          :current-page="sourceList.pagination.pageNum"
-          :page-size="sourceList.pagination.pageSize"
-          :total="sourceList.pagination.total"
-          @size-change="handleSizeChange"
-          @current-change="handlePageChange"
-        />
-      </el-row>
+        </el-table-column>
+        <el-table-column label="支出">
+          <el-table-column label="支付货款" prop="payForGoods" width="120" />
+          <el-table-column label="其他支出" prop="otherExpenses" width="120" />
+        </el-table-column>
+        <el-table-column label="统计">
+          <el-table-column label="收入合计" prop="totalIncome" width="120" />
+          <el-table-column label="支出合计" prop="totalExpenses" width="120" />
+          <el-table-column label="毛利" prop="grossGrofit" width="120" />
+          <el-table-column label="毛利率" prop="grossRofitMargin" width="120">
+            <template #default="{ row }">
+              <div style="width: 100%">{{ row.grossRofitMargin }}%</div>
+            </template></el-table-column
+          >
+        </el-table-column>
+        <el-table-column label="提成">
+          <el-table-column label="售后" prop="afterSalesAmount" width="120" />
+          <el-table-column label="公共" prop="publicAmount" width="120" />
+          <el-table-column label="总办" prop="haveOverallAmount" width="120" />
+          <el-table-column
+            label="部门提成"
+            prop="departmentalCommission"
+            width="120"
+          />
+          <el-table-column
+            label="个人提成"
+            prop="personalCommission"
+            width="120"
+          />
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="100" fixed="right">
+          <template #default="{ row }">
+            <div>
+              <el-button type="primary" @click="changeExchangeRate(row)" link
+                >调整</el-button
+              >
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
+    <el-row style="padding: 20px; background: #fff" justify="end" type="flex">
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :current-page="sourceList.pagination.pageNum"
+        :page-size="sourceList.pagination.pageSize"
+        :total="sourceList.pagination.total"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+      />
+    </el-row>
 
     <el-dialog title="调整" v-if="openChange" v-model="openChange" width="700">
       <byForm
@@ -643,6 +663,7 @@ const submitChangeForm = () => {
           });
           openChange.value = false;
           getList();
+          getHeaderData();
         },
         (err) => {
           console.log(err);
@@ -668,4 +689,112 @@ const openDetails = (row) => {
 ::v-deep(.el-input-number .el-input__inner) {
   text-align: left;
 }
+
+.by-search {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  .more-icon {
+    float: right;
+    cursor: pointer;
+    line-height: 32px;
+    text-align: center;
+    margin-left: 5px;
+  }
+}
+#ul-box {
+  padding: 0;
+  overflow: hidden;
+  margin: 0;
+  li {
+    list-style: none;
+    min-width: 285px;
+    box-sizing: border-box;
+    margin: 0 20px 20px 0;
+    background: #eff6ff;
+    float: left;
+    overflow: hidden;
+    padding: 20px;
+    color: #333333;
+    border-radius: 10px;
+    .label {
+      font-size: 14px;
+    }
+    .label::before {
+      width: 10px;
+      height: 10px;
+      content: "";
+      border-radius: 50%;
+      background: #0084ff;
+      display: inline-block;
+      margin-right: 10px;
+    }
+    .num {
+      margin-top: 10px;
+      font-size: 24px;
+      font-weight: bold;
+    }
+  }
+  //#F5F3FF #9E64ED
+  .theme2 {
+    background: #f5f3ff;
+    .label::before {
+      background: #9e64ed;
+    }
+  }
+  //#FFF1E1 #FF9315
+  .theme3 {
+    background: #fff1e1;
+    .label::before {
+      background: #ff9315;
+    }
+  }
+  //#E2FBE8 #39C55A
+  .theme4 {
+    background: #e2fbe8;
+    .label::before {
+      background: #39c55a;
+    }
+  }
+  .theme5 {
+    background: #ffebe9;
+    .label::before {
+      background: #f94539;
+    }
+  }
+  .theme6 {
+    background: #e4f9f9;
+    .label::before {
+      background: #53cbcb;
+    }
+  }
+  .multi-data {
+    .label::before {
+      display: none;
+    }
+    .label {
+      font-size: 14px;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 8px;
+    }
+    .num-warp {
+      overflow: hidden;
+      .num-box {
+        float: left;
+        min-width: 80px;
+        margin-right: 20px;
+        .num-small {
+          font-size: 16px;
+          font-weight: bold;
+          margin-bottom: 8px;
+        }
+        .label-small {
+          color: #666;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
 </style>