From cc4a9beae6919d7ce73274d7d4cddfc63ed5724c Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Fri, 9 Aug 2024 18:13:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=B9=E6=AF=94=E5=B7=AE=E5=BC=82=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/createDialog.js          |  39 +-
 src/views/lease/leaseLog.vue       | 657 +++++++++++++++++++++++++
 src/views/lease/leaseLogDetail.vue | 764 +++++++++++++++++++++++++++++
 src/views/lease/sign.vue           |   8 +-
 src/views/login/index.vue          |  18 +-
 src/views/system/menu.vue          |  36 ++
 6 files changed, 1509 insertions(+), 13 deletions(-)
 create mode 100644 src/views/lease/leaseLog.vue
 create mode 100644 src/views/lease/leaseLogDetail.vue

diff --git a/src/utils/createDialog.js b/src/utils/createDialog.js
index 1fcc6a2..4f2688b 100644
--- a/src/utils/createDialog.js
+++ b/src/utils/createDialog.js
@@ -16,6 +16,17 @@ export class CreateDialog {
           render: () => {}
         }
       ]
+      options: {
+        disabled: [boolean],
+        width: [string,number],
+        labelPosition: [string],
+        size: [string],
+        labelReplace: [Map] , //like [oldVal, newVal],
+        fromData: [string] , //form数据源
+        fromFile: [string], //file数据源
+        notUseRules: [boolean],
+        formRef: [string]
+      }
      */
     this.self = self;
     this.$createElement = self.$createElement;
@@ -38,7 +49,7 @@ export class CreateDialog {
     let that = this.self;
     let props = {};
     if (info.edit_input === "file" || info.edit_input === "files") {
-      props.fileList = that.file[info.field];
+      props.fileList = this.options.fromFile ? that[this.options.fromFile][info.field] : that.file[info.field];
       props.beforeUpload = (file) => {
         if (file.size / 1000 > (50 * 1024)) {
           that.$message({
@@ -139,14 +150,14 @@ export class CreateDialog {
       "el-form",
       {
         class: "form-body",
-        ref: "elForm",
+        ref: this.options.formRef || "elForm",
         style: {
           "padding-right": "12px",
         },
         props: {
           model: this.options.disabled ? that.originalForm : that.form,
           labelWidth: this.options.labelWidth || "100px",
-          rules: that.rules,
+          rules: this.options.notUseRules ? {} : that.rules,
           labelPosition: this.options.labelPosition || "top",
           size: this.options.size || "small",
           disabled: this.options.disabled
@@ -168,7 +179,7 @@ export class CreateDialog {
                       width: "100%",
                     },
                     props: {
-                      label: i.name,
+                      label: this.options.labelReplace ? (this.options.labelReplace.get(i.name) || i.name) : i.name,
                       prop: i.field,
                       required:
                         i.validation instanceof Array
@@ -190,7 +201,7 @@ export class CreateDialog {
                             ...addPropsMap.get(i.edit_input),
                             ...this.extraProps(i),
                             placeholder: i.help,
-                            value: this.options.disabled ? that.originalForm[i.field] : that.form[i.field],
+                            value: this.options.fromData ? that[this.options.fromData][i.field] : (this.options.disabled ? that.originalForm[i.field] : that.form[i.field]),
                             readonly: that.type === "show",
                             //disabled: that.type === 'show',
                           },
@@ -202,11 +213,19 @@ export class CreateDialog {
                               e
                             ) => {
                               if (i.field) {
-                                that.form[i.field] = e;
-                                that.form = Object.assign(
-                                  {},
-                                  that.form
-                                );
+                                if (this.options.fromData) {
+                                  that[this.options.fromData][i.field] = e;
+                                  that[this.options.fromData] = Object.assign(
+                                    {},
+                                    that[this.options.fromData]
+                                  );
+                                } else {
+                                  that.form[i.field] = e;
+                                  that.form = Object.assign(
+                                    {},
+                                    that.form
+                                  );
+                                }
                               }
                             },
                           },
diff --git a/src/views/lease/leaseLog.vue b/src/views/lease/leaseLog.vue
new file mode 100644
index 0000000..903218d
--- /dev/null
+++ b/src/views/lease/leaseLog.vue
@@ -0,0 +1,657 @@
+<template>
+  <div>
+    <!-- 查询配置 -->
+    <div>
+      <div ref="lxHeader">
+        <LxHeader
+          :icon="$route.meta.icon"
+          :text="$route.meta.title"
+        >
+          <div slot="content"></div>
+          <slot>
+            <header-content :auths="auths_auth_mixin">
+              <template #search>
+                <div style="display: flex">
+                  <Select
+                    v-model="select.filter[0].key"
+                    style="width: 100px"
+                    placeholder="搜索条目"
+                  >
+                    <Option
+                      v-for="item in form"
+                      :key="item.id"
+                      :value="item.field"
+                    >{{ item.name }}</Option
+                    >
+                  </Select>
+                  <Select
+                    v-model="select.filter[0].op"
+                    style="width: 100px; margin-left: 10px"
+                    placeholder="搜索条件"
+                  >
+                    <Option
+                      v-for="item in op"
+                      :key="item.value"
+                      :value="item.value"
+                    >{{ item.label }}</Option
+                    >
+                  </Select>
+                  <template
+                    v-if="
+                      select.filter[0].op !== 'range' &&
+                      !columnArrTest(select.filter[0].key)
+                    "
+                  >
+                    <Input
+                      v-model="select.filter[0].value"
+                      style="width: 150px; margin-left: 10px"
+                      placeholder="请填写关键词"
+                    />
+                  </template>
+                  <template
+                    v-else-if="
+                      select.filter[0].op !== 'range' &&
+                      columnArrTest(select.filter[0].key)
+                    "
+                  >
+                    <Select
+                      v-model="select.filter[0].value"
+                      style="width: 150px; margin-left: 10px"
+                      placeholder="请选择关键词"
+                    >
+                      <Option
+                        v-for="item in getColumnParams(select.filter[0].key)"
+                        :key="item.id"
+                        :value="getColumnField(select.filter[0].key)._relations ? item[getColumnField(select.filter[0].key)._relations.foreign_key] : item.value"
+                      >{{
+                          item.key || item.value || item.name || item.no || item.mingcheng || item.id
+                        }}</Option
+                      >
+                    </Select>
+                  </template>
+                  <template v-else>
+                    <Input
+                      :value="select.filter[0].value.split(',')[0]"
+                      style="width: 150px; margin-left: 10px"
+                      placeholder="范围开始关键词"
+                      @input="(e) => inputStartHandler(e, select.filter[0])"
+                    />
+                    <span
+                      style="
+                        margin-left: 10px;
+                        display: flex;
+                        align-items: center;
+                      "
+                    >至</span
+                    >
+                    <Input
+                      :value="select.filter[0].value.split(',')[1]"
+                      style="width: 150px; margin-left: 10px"
+                      placeholder="范围结束关键词"
+                      @input="(e) => inputEndHandler(e, select.filter[0])"
+                    />
+                  </template>
+                  <Button
+                    style="margin-left: 10px"
+                    type="primary"
+                    @click="$refs['xyTable'].getTableData(true)"
+                  >查询</Button
+                  >
+
+                  <xy-selectors
+                    style="margin-left: 10px"
+                    @reset="reset"
+                    @search="$refs['xyTable'].getTableData(true)"
+                  >
+                    <template>
+                      <div class="select">
+                        <div
+                          class="select__item"
+                          v-for="(item, index) in select.filter"
+                          :key="`${item.value}-${index}`"
+                        >
+                          <p>条件{{ index + 1 }}</p>
+                          <Select
+                            v-model="item.key"
+                            style="width: 100px"
+                            placeholder="搜索条目"
+                          >
+                            <Option
+                              v-for="item in form"
+                              :key="item.id"
+                              :value="item.field"
+                            >{{ item.name }}</Option
+                            >
+                          </Select>
+                          <Select
+                            v-model="item.op"
+                            style="width: 100px; margin-left: 10px"
+                            placeholder="搜索条件"
+                          >
+                            <Option
+                              v-for="item in op"
+                              :key="item.value"
+                              :value="item.value"
+                            >{{ item.label }}</Option
+                            >
+                          </Select>
+                          <template
+                            v-if="
+                              item.op !== 'range' && !columnArrTest(item.key)
+                            "
+                          >
+                            <Input
+                              v-model="item.value"
+                              style="width: 150px; margin-left: 10px"
+                              placeholder="请填写关键词"
+                            />
+                          </template>
+                          <template
+                            v-else-if="
+                              item.op !== 'range' && columnArrTest(item.key)
+                            "
+                          >
+                            <Select
+                              v-model="item.value"
+                              style="width: 150px; margin-left: 10px"
+                              placeholder="请选择关键词"
+                            >
+                              <Option
+                                v-for="item in getColumnParams(item.key)"
+                                :key="item.id"
+                                :value="getColumnField(item.key)._relations ? item[getColumnField(item.key)._relations.foreign_key] : item.value"
+                              >{{
+                                  item.key || item.value || item.name || item.no || item.mingcheng || item.id
+                                }}</Option
+                              >
+                            </Select>
+                          </template>
+                          <template v-else>
+                            <Input
+                              :value="item.value.split(',')[0]"
+                              style="width: 150px; margin-left: 10px"
+                              placeholder="范围开始关键词"
+                              @input="(e) => inputStartHandler(e, item)"
+                            />
+                            <span style="margin-left: 10px">至</span>
+                            <Input
+                              :value="item.value.split(',')[1]"
+                              style="width: 150px; margin-left: 10px"
+                              placeholder="范围结束关键词"
+                              @input="(e) => inputEndHandler(e, item)"
+                            />
+                          </template>
+                          <el-button
+                            v-if="index !== 0"
+                            size="small"
+                            type="danger"
+                            icon="el-icon-delete"
+                            circle
+                            style="margin-left: 10px"
+                            @click="select.filter.splice(index, 1)"
+                          ></el-button>
+                        </div>
+                      </div>
+                      <div class="add-btn">
+                        <el-button
+                          size="small"
+                          type="primary"
+                          icon="el-icon-plus"
+                          circle
+                          @click="
+                            select.filter.push({ key: '', op: '', value: '' })
+                          "
+                        ></el-button>
+                        <span>新增一条</span>
+                      </div>
+                    </template>
+                  </xy-selectors>
+                </div>
+              </template>
+              <template #create>
+                <Button
+                  type="primary"
+                  @click="
+                    $refs['dialog'].setType('add'), $refs['dialog'].show()
+                  "
+                >新增</Button
+                >
+              </template>
+              <template #import>
+                <Button type="primary" @click="$refs['imports'].show()"
+                >导入</Button
+                >
+              </template>
+              <template #export>
+                <Button
+                  type="primary"
+                  @click="exportExcel(new Date().getTime().toString())"
+                >导出</Button
+                >
+              </template>
+            </header-content>
+          </slot>
+        </LxHeader>
+      </div>
+    </div>
+
+    <xy-table
+      :btn-width="300"
+      :auths="auths_auth_mixin"
+      :delay-req="true"
+      :destroy-action="destroy"
+      ref="xyTable"
+      :border="true"
+      :action="index"
+      :req-opt="select"
+      :destroy-req-opt="select"
+      :table-item="table"
+      @detail="
+        (row) => {
+          $router.push({
+            path: $route.path + '/detail/' + row.id
+          })
+        }
+      "
+      @editor="
+        (row) => {
+        }
+      "
+      @loaded="adjustAlignment"
+    >
+    </xy-table>
+
+  </div>
+</template>
+
+<script>
+import { index as fieldIndex } from "@/api/system/customFormField";
+import { authMixin } from "@/mixin/authMixin";
+import { index, destroy } from "@/api/system/baseForm";
+import { op } from "@/const/op";
+import { download } from "@/utils/downloadRequest";
+import { getparameter } from "@/api/system/dictionary";
+import { show } from "@/api/system/customForm";
+import * as XLSX from "xlsx";
+import { saveAs } from "file-saver";
+import { listdept } from "@/api/system/department"
+
+import LxHeader from "@/components/LxHeader/index.vue";
+import headerContent from "@/components/LxHeader/XyContent.vue";
+export default {
+  name: 'tableList',
+  components: {
+    LxHeader,
+    headerContent,
+  },
+  mixins: [authMixin],
+  provide: {
+    formStore: () => this.form,
+  },
+  data() {
+    return {
+      firstAdjustTable: true,
+      op,
+      select: {
+        table_name: "",
+        filter: [
+          {
+            key: "",
+            op: "",
+            value: "",
+          },
+        ],
+      },
+      form: [],
+      table: [],
+      customForm: {
+        customFormId: "",
+        tableName: "",
+      },
+    };
+  },
+  methods: {
+    index,
+    destroy,
+    download,
+    reset() {
+      this.select.filter.splice(1);
+      this.select.filter[0] = {
+        key: "",
+        op: "",
+        value: "",
+      };
+    },
+
+    async exportExcel(sheetName) {
+      const res = await index(
+        Object.assign(this.select, { page: 1, page_size: 9999 })
+      );
+      if (res.data) {
+        let headers = this.form.map((i) => {
+          return {
+            key: i.field,
+            title: i.name,
+          };
+        });
+        const data = res.data.map((row) =>
+          headers.map((header) => row[header.key])
+        );
+        data.unshift(headers.map((header) => header.title));
+        const wb = XLSX.utils.book_new();
+        const ws = XLSX.utils.aoa_to_sheet(data);
+        XLSX.utils.book_append_sheet(wb, ws, sheetName);
+        const wbout = XLSX.write(wb, {
+          bookType: "xlsx",
+          bookSST: true,
+          type: "array",
+        });
+        saveAs(
+          new Blob([wbout], { type: "application/octet-stream" }),
+          `${sheetName}.xlsx`
+        );
+      }
+    },
+
+    //target要为内存地址引用类型
+    inputStartHandler(e, target) {
+      let temp = target?.value.split(",")[1];
+      target.value = `${e},${temp ? temp : ""}`;
+    },
+    inputEndHandler(e, target) {
+      let temp = target?.value.split(",")[0];
+      target.value = `${temp ? temp : ""},${e}`;
+    },
+
+    async getFormDetail() {
+      if (this.$route.meta.params?.custom_form) {
+        let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
+        try {
+          let custom_form = JSON.parse(decode);
+          this.customForm.customFormId = custom_form.custom_form_id;
+          this.customForm.tableName = custom_form.table_name;
+          this.select.table_name = custom_form.table_name;
+        } catch (err) {
+          console.warn(err);
+        }
+      }
+
+      const res = await show({ id: this.customForm.customFormId }, false);
+
+      //字段处理
+      //初始表白名单
+      let baseTable = new Map([
+        ['departments', async () => {
+          const res = await listdept()
+          return res
+        }],
+        ['admins',[]]
+      ])
+      let { fields, relation } = res;
+      let fieldRes = fields.sort((a,b) => a.sort - b.sort)
+      if (
+        !fields ||
+        !relation ||
+        !fields instanceof Array ||
+        !relation instanceof Array
+      ) {
+        throw new Error("fields或relation格式错误");
+      }
+      console.log(fieldRes)
+      fieldRes?.forEach((i, index) => {
+        i._relations = relation.find(
+          (j) => j.link_table_name.split("_")[1] === i.field
+        ) || relation.find(
+          (j) => j.local_key === i.field
+        );
+        if (i.select_item && typeof i.select_item === "object" && !(i.select_item instanceof Array)) {
+          let keys = Object.keys(i.select_item)
+          if (keys.length > 0) {
+            i._params = keys.map((key) => {
+              return {
+                key,
+                value: /^\d*$/.test(i.select_item[key])
+                  ? Number(i.select_item[key])
+                  : i.select_item[key],
+              };
+            });
+
+            //有select,radio
+            i.edit_input = 'radio'
+          }
+        }
+        if (i.edit_input === 'file' || i.edit_input === 'files') {
+          return
+        }
+        if (i._relations) {
+          if (baseTable.get(i._relations.link_table_name)) {
+            baseTable
+              .get(i._relations.link_table_name)()
+              .then((res) => {
+                i._params = res.data;
+              });
+          } else {
+            i._params = i._relations.parameter_id
+              ? getparameter({ id: i._relations.parameter_id }, false).then(
+                (res) => {
+                  i._params = res.detail;
+                }
+              )
+              : this.index({
+                table_name: i._relations.link_table_name,
+                page: 1,
+                page_size: 9999,
+              }).then((res) => {
+                i._params = res.data;
+              });
+          }
+        }
+      });
+      this.form = fieldRes || [];
+      this.form
+        ?.filter((i) => i.list_show)
+        .forEach((i) => {
+          let linkOb = {};
+
+          if (i.edit_input === "richtext") {
+            linkOb.customFn = (row) => {
+              return (
+                <div
+                  style={{ "max-height": "55px","overflow": "scroll" }}
+                  domPropsInnerHTML={row[i.field]}
+                ></div>
+              );
+            };
+          }
+          if (
+            i.select_item &&
+            typeof i.select_item === "object" &&
+            !(i.select_item instanceof Array)
+          ) {
+            let keys = Object.keys(i.select_item);
+            linkOb.customFn = (row) => {
+              let paramMap = new Map();
+              keys.forEach((key) => {
+                paramMap.set(i.select_item[key], key);
+              });
+
+              return <span>{ paramMap.get(row[i.field]) ? paramMap.get(row[i.field].toString()) : row[i.field] }</span>;
+            };
+          }
+          if (i._relations) {
+            let { link_relation, foreign_key, link_with_name } = i._relations;
+            if (link_relation === "newHasOne" || link_relation === "hasOne") {
+              linkOb.customFn = (row) => {
+                if (i.edit_input === "file") {
+                  return (
+                    <a
+                      download={row[link_with_name]?.original_name}
+                      href={row[link_with_name]?.url}
+                    >
+                      {row[link_with_name]?.original_name}
+                    </a>
+                  );
+                } else {
+                  return (
+                    <span>
+                      {row[link_with_name]?.name ||
+                        row[link_with_name]?.no ||
+                        row[link_with_name]?.value}
+                    </span>
+                  );
+                }
+              };
+            }
+
+            if (link_relation === "hasMany" || link_relation === "newHasMany") {
+              linkOb.customFn = (row) => {
+                if (i.edit_input === "files") {
+                  return (
+                    <div style="display: flex;flex-direction: column;">
+                      {row[link_with_name]?.map((o) => (
+                        <a>
+                          { o?.original_name || o?.name }
+                        </a>
+                      ))}
+                    </div>
+                  )
+                } else {
+                  return (
+                    <div>
+                      {row[link_with_name]?.map((o) => (
+                        <p>
+                          {o?.name ||
+                            o?.no ||
+                            o?.value ||
+                            o?.biaoti ||
+                            o?.mingcheng}
+                        </p>
+                      ))}
+                    </div>
+                  );
+                }
+              };
+            }
+          }
+
+          this.table.push(
+            Object.assign(
+              {
+                prop: i.field,
+                label: i.name,
+                width: i.width,
+                align: 'center',
+                fixed: i.is_fixed,
+              },
+              linkOb
+            )
+          );
+        });
+      this.table.unshift({
+        prop: "id",
+        width: 60,
+        label: "序号",
+        formatter: (row, column, cellValue, index) => (this.$refs['xyTable'].selectOpt.page - 1) * this.$refs['xyTable'].selectOpt.page_size + index + 1
+      })
+    },
+
+    adjustAlignment () {
+      if (this.firstAdjustTable) {
+        const data = this.$refs['xyTable'].getListData();
+        if (data.length < 2) return;
+        try {
+          this.form.filter(i => i.list_show).forEach((i) => {
+            let maxLength = -Infinity;
+            let minLength = Infinity;
+            let numberLength = 0;
+            let temp = 0;
+            while (temp < data.length) {
+              maxLength = Math.max(maxLength, data[temp][i.field]?.length??0);
+              minLength = Math.min(minLength, data[temp][i.field]?.length??0);
+              numberLength += /^-?[0-9]+(\.[0-9]+)?$/.test(data[temp][i.field]) ? 1 : 0;
+              temp++;
+            }
+            if (numberLength === temp && numberLength !== 0) {
+              this.table.find(a => a.prop === i.field).align = 'right';
+            }
+            else if (Math.abs(maxLength - minLength) > 4) {
+              this.table.find(a => a.prop === i.field).align = 'left';
+            }
+          })
+          console.log(this.table)
+        } catch (e) {
+          console.error(e)
+        }
+        this.$nextTick(() => {
+          this.$refs['xyTable'].doLayout();
+          this.firstAdjustTable = false;
+        })
+      }
+    }
+  },
+
+  computed: {
+    columnArrTest() {
+      return function (field) {
+        return this.form.find((i) => i.field === field)
+          ? this.form.find((i) => i.field === field).search_input === "checkbox" || this.form.find((i) => i.field === field).search_input === "radio"
+          : false;
+      };
+    },
+    getColumnField() {
+      return function (field) {
+        return this.form.find((i) => i.field === field)
+          ? this.form.find((i) => i.field === field)
+          : {};
+      };
+    },
+    getColumnParams() {
+      return function (field) {
+        return this.form.find((i) => i.field === field)
+          ? this.form.find((i) => i.field === field)._params
+          : [];
+      };
+    }
+  },
+  created() {
+    this.getFormDetail();
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.select {
+  &__item {
+    & > p {
+      display: inline-block;
+      width: 80px;
+      text-align: center;
+    }
+
+    & + div {
+      margin-top: 6px;
+    }
+  }
+}
+.add-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  margin-top: 10px;
+  & > span {
+    padding: 0 10px;
+  }
+}
+
+a {
+  color: red;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+a:hover {
+  color: red;
+  text-decoration: underline;
+}
+</style>
diff --git a/src/views/lease/leaseLogDetail.vue b/src/views/lease/leaseLogDetail.vue
new file mode 100644
index 0000000..ea9fb87
--- /dev/null
+++ b/src/views/lease/leaseLogDetail.vue
@@ -0,0 +1,764 @@
+<script>
+import { save, show, index, destroy, imports } from "@/api/system/baseForm";
+import { CreateDialog } from "@/utils/createDialog";
+import { deepCopy } from "@/utils";
+import { resolveFormInfo } from "@/utils/createTable";
+export default {
+  components: {},
+  props: {
+    tableName: String,
+  },
+  render(h) {
+    const _this = this;
+    let dialog = new CreateDialog(
+      this,
+      [
+        {
+          show: true,
+          key: "qiandingnianyue",
+          label: "签订年月",
+          render: h("el-date-picker", {
+            style: { width: "100%" },
+            props: {
+              type: "month",
+              placeholder: "请选择签订年月",
+              value: _this.originalForm.qiandingnianyue,
+              format: "yyyy-MM",
+              valueFormat: "yyyy-MM",
+            },
+            on: {
+              ["input"]: (e) => {
+                _this.form.qiandingnianyue = e;
+                _this.form = Object.assign({}, _this.form);
+              },
+            },
+          }),
+        }
+      ],
+      {
+        disabled: true,
+        notUseRules: true
+      },
+      false
+    );
+    let oldDialog = new CreateDialog(
+      this,
+      [
+        {
+          show: true,
+          key: "qiandingnianyue",
+          label: "签订年月",
+          render: h("el-date-picker", {
+            style: { width: "100%" },
+            props: {
+              type: "month",
+              placeholder: "请选择签订年月",
+              value: _this.oldLease.qiandingnianyue,
+              format: "yyyy-MM",
+              valueFormat: "yyyy-MM",
+            }
+          }),
+        },
+        {
+          key: "biangengshijian",
+          show: false
+        }
+      ],
+      {
+        disabled: true,
+        fromData: "oldLease",
+        fromFile: "oldFile",
+        formRef: "oldElForm"
+      },
+      false
+    );
+
+    return (
+      <div style="padding: 10px 20px;">
+        <el-card shadow="never" body-style={{'padding': '10px'}}>
+          <el-page-header content="合同变更记录" on={{['back']: _ => {this.$router.go(-1)}}}></el-page-header>
+        </el-card>
+        <el-row gutter={10}>
+          <el-col
+            span={12}
+            style={{ display: this.isShowOldData ? "block" : "none" }}
+          >
+            <el-card style="margin-top: 20px;">
+              <div slot="header" style="display: flex;align-items: center;">
+                <i
+                  className="el-icon-back"
+                  style="padding-right: 20px;font-size: 20px;font-weight: 600;cursor: pointer;"
+                  on={{
+                    ["click"]: (_) => {
+                      this.$router.go(-1);
+                    },
+                  }}
+                ></i>
+                <p>变更后数据</p>
+              </div>
+
+              {/* 资产信息 */}
+              <div style="margin-bottom: 10px;">
+                <div style="display: flex;margin-bottom: 10px;align-items: center;">
+                  <p style="font-weight: 700;line-height: 2;">资产信息</p>
+                </div>
+
+                <xy-table
+                  row-key={(row) => {
+                    row._relation_id
+                      ? row._relation_id
+                      : row.hasOwnProperty("land_id")
+                        ? "house_" + row.id
+                        : "land_" + row.id;
+                  }}
+                  row-style={({ row }) => {
+                    return this.originalForm.id_leases_to_assets_lease_id_relation?.find(j => ((j.land_id === row.land_id) || (j.house_id === row.house_id))) ? '' : { 'background': 'rgba(0,255,0,0.06)' }
+                  }}
+                  list={this.oldLease.id_leases_to_assets_lease_id_relation}
+                  height="300"
+                  isHandlerKey={false}
+                  is-page={false}
+                  table-item={[
+                    {
+                      prop: "name",
+                      label: "地块名称",
+                      width: 0,
+                      fixed: "left",
+                      align: "left",
+                      customFn: row => (
+                        <span>
+                          {
+                            row.land_id ? (
+                              this.oldLease.land.find(i => i.id === row.land_id)?.name
+                            ) : (
+                              this.oldLease.houses.find(i => i.id === row.house_id)?.name
+                            )
+                          }
+                        </span>
+                      )
+                    },
+                    {
+                      prop: "zuoluo",
+                      label: "坐落",
+                      width: 0,
+                      align: "left",
+                      customFn: row => (
+                        <span>
+                          {
+                            row.land_id ? (
+                              this.oldLease.land.find(i => i.id === row.land_id)?.zuoluo
+                            ) : (
+                              this.oldLease.houses.find(i => i.id === row.house_id)?.zuoluo
+                            )
+                          }
+                        </span>
+                      )
+                    },
+                    {
+                      prop: "shijimianji",
+                      label: "实际面积（m²）",
+                      width: 0,
+                      align: "center",
+                      customFn: row => (
+                        <span>
+                          {
+                            row.land_id ? (
+                              this.oldLease.land.find(i => i.id === row.land_id)?.shijimianji
+                            ) : (
+                              this.oldLease.houses.find(i => i.id === row.house_id)?.shijimianji
+                            )
+                          }
+                        </span>
+                      )
+                    },
+                    {
+                      prop: "chuzumianji",
+                      label: "出租面积（m²）",
+                      width: 160,
+                      customFn: row => (
+                        <span style={{
+                          color: (() => {
+                            return row.chuzumianji === this.originalForm?.id_leases_to_assets_lease_id_relation?.find(j => (j.land_id === row.land_id) || (j.house_id === row.house_id))?.chuzumianji ? '' : 'red'
+                          })()
+                        }}>{ row.chuzumianji }</span>
+                      )
+                    },
+                  ]}
+                ></xy-table>
+              </div>
+
+              {/* 租金收取计划 */}
+              <div style="margin-bottom: 10px;">
+                <div style="display: flex;margin-bottom: 10px;align-items: center;">
+                  <p style="font-weight: 700;line-height: 2;">
+                    租金收取计划
+                  </p>
+                </div>
+
+                <div style="display: grid;grid-gap: 10px;grid-template-columns: repeat(3, 1fr);">
+                  {this.oldLeasePlans.map((leasePlan, index) => (
+                    <Card padding={10}>
+                      <div
+                        slot="title"
+                        style="display: flex;align-items: center;height: 100%;"
+                      >
+                        <p style="font-size: 14px;">
+                          租金收取计划{index + 1}
+                        </p>
+                      </div>
+
+                      <div>
+                        <el-form
+                          disabled={true}
+                          ref={"leasePlan" + index}
+                          size="mini"
+                          label-position="top"
+                          props={{
+                            model: leasePlan,
+                          }}
+                        >
+                          <el-form-item label="租金到位时间">
+                            <el-date-picker
+                              style="width: 100%;"
+                              value-format="yyyy-MM-dd"
+                              vModel={leasePlan.zujindiyicidaoweishijian}
+                            ></el-date-picker>
+                          </el-form-item>
+                          <el-form-item label="应收租金">
+                            <el-input-number
+                              controls={false}
+                              precision={2}
+                              style="width: 100%"
+                              vModel={leasePlan.yingshou}
+                            ></el-input-number>
+                          </el-form-item>
+                        </el-form>
+                      </div>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+
+              {oldDialog.render()}
+            </el-card>
+          </el-col>
+          <el-col
+            span={12}
+          >
+            <el-card style="margin-top: 20px;">
+              <div slot="header" style="display: flex;align-items: center;">
+                <p>
+                  变更前数据
+                </p>
+              </div>
+
+              {/* 资产信息 */}
+              <div style="margin-bottom: 10px;">
+                <div style="display: flex;margin-bottom: 10px;align-items: center;">
+                  <p style="font-weight: 700;line-height: 2;">资产信息</p>
+
+                </div>
+
+                <xy-table
+                  row-key={(row) => {
+                    row._relation_id
+                      ? row._relation_id
+                      : row.hasOwnProperty("land_id")
+                        ? "house_" + row.id
+                        : "land_" + row.id;
+                  }}
+                  list={this.originalForm.id_leases_to_assets_lease_id_relation}
+                  row-style={({ row }) => {
+                    return this.oldLease.id_leases_to_assets_lease_id_relation?.find(j => ((j.land_id === row.land_id) || (j.house_id === row.house_id))) ? '' : { 'background': 'rgba(255,0,0,0.06)' }
+                  }}
+                  height="300"
+                  isHandlerKey={false}
+                  is-page={false}
+                  table-item={[
+                    {
+                      prop: "name",
+                      label: "地块名称",
+                      width: 0,
+                      fixed: "left",
+                      align: "left",
+                      customFn: row => (
+                        <span>
+                          {
+                            row.land_id ? (
+                              this.originalForm?.land?.find(i => i.id === row.land_id)?.name
+                            ) : (
+                              this.originalForm?.houses?.find(i => i.id === row.house_id)?.name
+                            )
+                          }
+                        </span>
+                      )
+                    },
+                    {
+                      prop: "zuoluo",
+                      label: "坐落",
+                      width: 0,
+                      align: "left",
+                      customFn: row => (
+                        <span>
+                          {
+                            row.land_id ? (
+                              this.originalForm?.land?.find(i => i.id === row.land_id)?.zuoluo
+                            ) : (
+                              this.originalForm?.houses?.find(i => i.id === row.house_id)?.zuoluo
+                            )
+                          }
+                        </span>
+                      )
+                    },
+                    {
+                      prop: "shijimianji",
+                      label: "实际面积（m²）",
+                      width: 0,
+                      align: "center",
+                      customFn: row => (
+                        <span>
+                          {
+                            row.land_id ? (
+                              this.originalForm?.land?.find(i => i.id === row.land_id)?.shijimianji
+                            ) : (
+                              this.originalForm?.houses?.find(i => i.id === row.house_id)?.shijimianji
+                            )
+                          }
+                        </span>
+                      )
+                    },
+                    {
+                      prop: "chuzumianji",
+                      label: "出租面积（m²）",
+                      width: 160,
+                    },
+                  ]}
+                ></xy-table>
+              </div>
+
+              {/* 租金收取计划 */}
+              <div style="margin-bottom: 10px;">
+                <div style="display: flex;margin-bottom: 10px;align-items: center;">
+                  <p style="font-weight: 700;line-height: 2;">租金收取计划</p>
+                </div>
+
+                <div style="display: grid;grid-gap: 10px;grid-template-columns: repeat(3, 1fr);">
+                  {this.leasePlans.map((leasePlan, index) => (
+                    <Card padding={10}>
+                      <div
+                        slot="title"
+                        style="display: flex;align-items: center;"
+                      >
+                        <p style="font-size: 14px;">租金收取计划{index + 1}</p>
+                      </div>
+
+                      <div>
+                        <el-form
+                          ref={"leasePlan" + index}
+                          size="mini"
+                          label-position="top"
+                          props={{
+                            model: leasePlan,
+                          }}
+                        >
+                          <el-form-item label="租金到位时间">
+                            <el-date-picker
+                              style="width: 100%;"
+                              value-format="yyyy-MM-dd"
+                              vModel={leasePlan.zujindiyicidaoweishijian}
+                            ></el-date-picker>
+                          </el-form-item>
+                          <el-form-item label="应收租金">
+                            <el-input-number
+                              controls={false}
+                              precision={2}
+                              style="width: 100%"
+                              vModel={leasePlan.yingshou}
+                            ></el-input-number>
+                          </el-form-item>
+                        </el-form>
+                      </div>
+                    </Card>
+                  ))}
+                </div>
+              </div>
+
+              {dialog.render()}
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+    );
+  },
+  data() {
+    return {
+      wxAreas: [
+        "宜兴市",
+        "惠山区",
+        "新吴区",
+        "梁溪区",
+        "江阴市",
+        "滨湖区",
+        "锡山区",
+      ],
+      isShowOldData: true,
+      nowAssets: [],
+      oldNowAssets: [],
+      houseDialog: false,
+      landDialog: false,
+      leasePlans: [],
+      oldLeasePlans: [],
+      landSelect: {
+        table_name: "lands",
+        keyword: "",
+      },
+      houseSelect: {
+        table_name: "houses",
+        keyword: "",
+      },
+      customForm: {
+        customFormId: "",
+        tableName: "",
+      },
+
+      columns: 1,
+      row: {},
+      formInfo: [],
+      id: "",
+      type: "add",
+      form: {},
+      originalForm: {},
+      oldLease: {},
+      oldFile: {},
+      rules: {},
+      file: {},
+    };
+  },
+  methods: {
+    getCustomForm () {
+      if (this.$route.meta.params?.custom_form) {
+        let decode = decodeURIComponent(this.$route.meta.params?.custom_form);
+        try {
+          let custom_form = JSON.parse(decode);
+          this.customForm.customFormId = custom_form.custom_form_id;
+          this.customForm.tableName = custom_form.table_name;
+        } catch (err) {
+          console.warn(err);
+        }
+      }
+    },
+    index,
+    setRow(row) {
+      this.row = row;
+    },
+    init() {
+      for (let key in this.form) {
+        if (this.form[key] instanceof Array) {
+          this.form[key] = [];
+        } else {
+          this.form[key] = "";
+        }
+      }
+      this.$refs["elForm"].clearValidate();
+    },
+    setType(type = "add") {
+      let types = ["add", "editor", "change"];
+      if (types.includes(type)) {
+        this.type = type;
+      } else {
+        console.warn("Unknown type: " + type);
+      }
+    },
+    setId(id) {
+      if (typeof id == "number") {
+        this.id = id;
+      } else {
+        console.error("error typeof id: " + typeof id);
+      }
+    },
+
+    async getDetail() {
+      const res = await show({ id: this.id, table_name: "leases_histories" });
+      this.$integrateData(this.form, res);
+
+      this.formInfo.forEach((i) => {
+        if (i.edit_input === "file") {
+        }
+        if (i.edit_input === "files") {
+          this.file[i.field] = res[`${i.field}_upload_details`];
+        }
+      });
+      this.form = Object.assign({}, this.form);
+      this.leasePlans = res.id_lease_plans_lease_id_relation;
+      this.originalForm = deepCopy(res);
+
+      if (this.originalForm.original_lease_id) {
+        const oldLease = await show({
+          id: this.originalForm.original_lease_id,
+          table_name: "leases"
+        })
+        this.oldLease = oldLease;
+        this.formInfo.forEach((i) => {
+          if (i.edit_input === "file") {
+          }
+          if (i.edit_input === "files") {
+            this.oldFile[i.field] = oldLease[`${i.field}_upload_details`];
+          }
+        });
+
+      }
+    },
+
+    submit() {
+      if (this.type === "add") {
+        if (this.form.hasOwnProperty("id")) {
+          delete this.form.id;
+        }
+      }
+      if (this.type === "editor" || this.type === "change") {
+        Object.defineProperty(this.form, "id", {
+          value: this.id,
+          enumerable: true,
+          configurable: true,
+          writable: true,
+        });
+      }
+
+      this.form.let_id = this.$route.params.letId;
+      save(Object.assign(this.form, { table_name: "leases" })).then((res) => {
+        if (this.type !== "add") {
+          Promise.all([
+            ...this.originalForm.id_leases_to_assets_lease_id_relation?.map(
+              (i) =>
+                destroy(
+                  {
+                    id: i.id,
+                    table_name: "leases_to_assets",
+                  },
+                  false
+                )
+            ),
+            ...this.originalForm.id_lease_plans_lease_id_relation?.map((i) =>
+              destroy(
+                {
+                  id: i.id,
+                  table_name: "lease_plans",
+                },
+                false
+              )
+            ),
+          ]);
+        }
+        let leaseToAssetsData = this.nowAssets.map((item) => ({
+          id: item._relation_id,
+          land_id: !item.hasOwnProperty("land_id") ? item.id : "",
+          house_id: item.hasOwnProperty("land_id") ? item.id : "",
+          chuzumianji: item._chuzumianji,
+          lease_id: res.id,
+        }));
+        if (leaseToAssetsData && leaseToAssetsData.length > 0) {
+          imports(
+            {
+              table_name: "leases_to_assets",
+              data: leaseToAssetsData,
+            },
+            false
+          );
+        }
+        let leasePlansData = this.leasePlans.map((item) => ({
+          ...item,
+          lease_id: res.id,
+        }));
+        if (leasePlansData && leasePlansData.length > 0) {
+          imports({
+            table_name: "lease_plans",
+            data: leasePlansData,
+          });
+        }
+        //变更保存日志
+        if (this.type === "change") {
+          let logData = deepCopy(this.originalForm)
+          logData.original_lease_id = logData.id;
+          delete logData.id;
+          for (let key in logData) {
+            if (/_relation/g.test(key)) {
+              logData[key].forEach(item => {
+                delete item.id;
+              })
+            }
+          }
+          save(
+            {
+              ...logData,
+              table_name: "leases_histories",
+              biangengshijian: this.$moment().format("YYYY-MM-DD HH:mm:ss")
+            },
+            false
+          );
+        }
+        this.$Message.success({
+          content: `${this.type === "add" ? "新增" : "编辑"}成功`,
+        });
+        this.$emit("refresh");
+        this.$router.push("/lease");
+      });
+    },
+  },
+  computed: {},
+  watch: {
+    oldLease: {
+      handler: function (newVal) {
+        this.formInfo.forEach((i) => {
+          if (i.field) {
+            this.rules[i.field] = [
+              {
+                validator: (rule, value, callback) => {
+                  if (i.edit_input === 'file' || i.edit_input === 'files') {
+                    if (this.oldLease[i.field].toString() === this.originalForm[i.field].toString()) {
+                      callback()
+                    } else {
+                      callback(new Error('数据变更'))
+                    }
+                  } else {
+                    if (this.oldLease[i.field] === this.originalForm[i.field]) {
+                      callback()
+                    } else {
+                      callback(new Error('数据变更'))
+                    }
+                  }
+                }
+              }
+            ];
+          }
+        })
+
+        this.$nextTick(() => {
+          console.log(this.$refs['oldElForm'])
+          this.$refs['oldElForm'].validate()
+        })
+      }
+    },
+    formInfo: {
+      handler: function (newVal) {
+        this.form = {};
+        this.rules = {};
+        this.file = {};
+        newVal.forEach((i) => {
+          if (i.field) {
+            this.form[i.field] = "";
+            if (i.edit_input === "files") {
+              this.form[i.field] = [];
+            }
+            if (i.edit_input === "files" || i.edit_input === "file") {
+              this.file[i.field] = [];
+            }
+            if (i.edit_input === "checkbox") {
+              this.form[i.field] = [];
+            }
+            if (i._relations) {
+              this.form[i._relations?.link_with_name] = [];
+            }
+          }
+        });
+      },
+      //immediate: true,
+    },
+    dialogVisible(val) {
+      if (val) {
+        if (this.type === "editor" || this.type === "change") {
+          this.$nextTick(() => this.getDetail());
+        }
+      } else {
+        this.id = "";
+        this.type = "";
+        this.init();
+        this.$refs["elForm"].clearValidate();
+        delete this.form.id;
+        for (let key in this.file) {
+          this.file[key] = [];
+        }
+        this.$refs["landLinkTable"].clearSelection();
+        this.$refs["houseLinkTable"].clearSelection();
+      }
+    },
+  },
+  created() {
+    this.id = this.$route.params.id;
+    this.getCustomForm();
+    resolveFormInfo(this.customForm.customFormId).then((res) => {
+      this.formInfo = res;
+
+      this.$nextTick(() => this.getDetail());
+    });
+  },
+  mounted() {},
+  beforeDestroy() {
+    this.id = "";
+    this.type = "";
+    this.init();
+    this.$refs["elForm"].clearValidate();
+    delete this.form.id;
+    for (let key in this.file) {
+      this.file[key] = [];
+    }
+  },
+};
+</script>
+
+<style>
+:root {
+  --column-num: 2;
+}
+</style>
+<style scoped lang="scss">
+::v-deep .ivu-card-head {
+  padding: 10px 12px;
+  height: 49px;
+}
+.uploaded-a {
+  color: red;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.uploaded-a:hover {
+  color: red;
+  text-decoration: underline;
+}
+
+.form-body {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(2, 1fr);
+}
+::v-deep .el-input-number input {
+  text-align: right;
+}
+
+.show-old-data-btn {
+  cursor: pointer;
+  filter: drop-shadow(2px 4px 6px #0005);
+  border-radius: 6px 0 0 6px;
+  padding: 12px 4px;
+  z-index: 10;
+  writing-mode: vertical-rl;
+  color: #fff;
+  position: fixed;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  background: rgb(53, 122, 199);
+  transition: all .3s;
+
+  &:hover {
+    transform: translateY(-50%) scale(1.05,1.05);
+  }
+}
+::v-deep .el-form-item__error {
+  transform: none;
+  left: 0 !important;
+}
+::v-deep .is-error .el-form-item__content > div:nth-child(1) {
+  filter: drop-shadow(0 0 4px red);
+}
+</style>
diff --git a/src/views/lease/sign.vue b/src/views/lease/sign.vue
index 0c30662..b2a1907 100644
--- a/src/views/lease/sign.vue
+++ b/src/views/lease/sign.vue
@@ -35,7 +35,11 @@ export default {
           }),
         },
       ],
-      {},
+      {
+        labelReplace: new Map([
+          ["租赁合同", this.type === 'change' ? '补充协议' : '租赁合同']
+        ])
+      },
       false
     );
     let oldDialog = new CreateDialog(
@@ -64,7 +68,7 @@ export default {
     );
 
     return (
-      <div>
+      <div style="padding: 10px 20px;">
         <div
           class="show-old-data-btn"
           style={{
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 2e6d2ce..20794b6 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -52,6 +52,11 @@
 
 
     </el-form>
+
+
+    <footer class="copyright">
+      版权所有：无锡市交通产业集团有限公司
+    </footer>
   </div>
 </template>
 
@@ -345,7 +350,7 @@
 
     .show-pwd {
       position: absolute;
-      right: 10%;
+      right: 8%;
       top: 50%;
       transform: translate(0, -50%);
       font-size: 16px;
@@ -374,6 +379,17 @@
   ::v-deep .el-form-item--small.el-form-item {
     margin-bottom: 1.3vw;
   }
+  .copyright {
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    line-height: 16px;
+    font-size: 16px;
+
+    position: absolute;
+    left: 0;
+    bottom: 6vh;
+  }
 
   @media (max-width: 960px) {
     .title-img {
diff --git a/src/views/system/menu.vue b/src/views/system/menu.vue
index 5935635..7cca4e8 100644
--- a/src/views/system/menu.vue
+++ b/src/views/system/menu.vue
@@ -74,6 +74,14 @@
                 ghost
                 >编辑</Button
               >
+              <Button
+                type="primary"
+                @click="newDetail(scope.row)"
+                size="small"
+                style="margin-left: 10px"
+                ghost
+              >新增详情</Button
+              >
             </template>
           </el-table-column>
         </el-table>
@@ -209,6 +217,8 @@
     </el-dialog>
 
     <el-dialog
+      :append-to-body="true"
+      :modal-append-to-body="true"
       title="操作新增"
       :visible.sync="dialogOptFormVisible"
       width="30%"
@@ -242,6 +252,7 @@ import LxHeader from "@/components/LxHeader/index.vue";
 import { save, listmenu, del } from "@/api/system/menu";
 import { index } from "@/api/system/customForm";
 import { store as storeAuth, list, del as delAuth } from "@/api/system/auth.js";
+import { deepCopy } from '@/utils'
 
 export default {
   components: {
@@ -425,6 +436,31 @@ export default {
       }
       this.dialogFormVisible = true;
     },
+    newDetail (row) {
+      this.prompt('新增详情菜单？','请输入组件路径').then(({ value }) => {
+        let copyRow = deepCopy(row)
+        delete copyRow.auth_node_tags_array;
+        delete copyRow.children;
+        delete copyRow.id;
+        delete copyRow.auth_node_tags;
+        delete copyRow.created_at;
+        delete copyRow.updated_at;
+        let pathArr = copyRow.path.split("?")
+        let detailPath = `$${pathArr[0]}/detail/:id?`
+        if (pathArr[1]) {
+          detailPath += pathArr[1]
+        }
+        copyRow.path = detailPath;
+        copyRow.name += '详情'
+        copyRow.sortnumber++;
+        copyRow.url = value;
+        save(copyRow)
+          .then((response) => {
+            this.$Message.success("操作成功");
+            this.load();
+          })
+      })
+    },
     addchildren(obj) {
       this.form = this.$options.data().form;
       if (obj) {