From ec2b60985934f73641a30676b91d3c14b34e1804 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Mon, 11 Sep 2023 14:07:55 +0800
Subject: [PATCH] 2023-9-11

---
 src/api/system/customForm.js             |   8 +
 src/store/modules/permission.js          |   3 +
 src/views/component/detail.vue           | 245 +++++++++++++++++++++++
 src/views/component/table.vue            |  11 +-
 src/views/system/components/linkWith.vue |  23 +++
 src/views/system/form.vue                | 181 +++++++++++++----
 6 files changed, 418 insertions(+), 53 deletions(-)
 create mode 100644 src/views/component/detail.vue

diff --git a/src/api/system/customForm.js b/src/api/system/customForm.js
index d9e9198..06d9c1c 100644
--- a/src/api/system/customForm.js
+++ b/src/api/system/customForm.js
@@ -65,3 +65,11 @@ export function relationDestroy(params) {
     params
   })
 }
+
+export function clone (params) {
+  return request({
+    method: 'get',
+    url: '/api/admin/custom-form/clone-table',
+    params
+  })
+}
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 668e182..3859c95 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -96,6 +96,9 @@ const componentHandler = (path) => {
 // path为#,左边栏根目录无视图，##下级根目录无视图，$不显示在左边栏视图，^左边栏根目录有视图
 export function generaMenu(routes, data) {
   data.forEach(item => {
+    if (!item.path) {
+      item.path = item.url
+    }
     let params = {};
     if(item.path?.includes('?')){
       let flag = item.path.split('?')
diff --git a/src/views/component/detail.vue b/src/views/component/detail.vue
new file mode 100644
index 0000000..d92c7c3
--- /dev/null
+++ b/src/views/component/detail.vue
@@ -0,0 +1,245 @@
+<template>
+  <div>
+    <el-page-header
+      :content="
+        $route.meta.title +
+        (detail.dikuaimingcheng ? ' - ' + detail.dikuaimingcheng : '')
+      "
+      style="
+        padding: 1em;
+        font-size: 1em;
+        background: #fff;
+        margin: 1.67em 0;
+        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+        border-radius: 5px;
+      "
+      @back="$router.back()"
+    >
+    </el-page-header>
+
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-card>
+          <el-descriptions
+            title="基本信息"
+            :column="2"
+            :label-style="{ 'font-weight': '600' }"
+          >
+            <el-descriptions-item
+              v-for="item in fields"
+              :label="item.name"
+              v-if="!['file', 'picture'].find((j) => j === item.field)"
+            >{{ contentFormat(item)
+              }}{{ units.get(item.field) }}</el-descriptions-item
+            >
+          </el-descriptions>
+        </el-card>
+      </el-col>
+    </el-row>
+
+
+    <Modal
+      :width="76"
+      transfer
+      :z-index="6000"
+      v-model="showModal"
+      :footer-hide="true"
+      title="预览"
+    >
+      <template>
+        <iframe
+          style="width: 100%; height: 57vh"
+          :src="codeUri"
+          border="0"
+        ></iframe>
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import { show, index } from "@/api/system/baseForm";
+import { show as formShow } from "@/api/system/customForm";
+import { getparameter } from "@/api/system/dictionary";
+import { listdept } from "@/api/system/department";
+import { download } from "@/utils/downloadRequest";
+export default {
+  name: "detail",
+  data() {
+    return {
+      showModal:false,
+      codeUri: "",
+
+      detail: {},
+      fields: [],
+      relation: [],
+      customForm: {
+        customFormId: "",
+        tableName: "",
+      },
+
+    };
+  },
+  methods: {
+    open(url) {
+      this.codeUri = `http://view.ali251.langye.net:8012/onlinePreview?url=${encodeURIComponent(
+        new Buffer(url).toString("base64")
+      )}`;
+
+      this.showModal = true;
+    },
+
+    down(e) {
+      download(e.url, "get", {}, e.original_name);
+    },
+
+    async getFields() {
+      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);
+        }
+      }
+
+      const res = await formShow({ id: this.customForm.customFormId }, false);
+      this.fields = res.fields.sort((a, b) => a.sort - b.sort);
+      this.relation = res.relation;
+
+      //字段处理
+      //初始表白名单
+      let baseTable = new Map([
+        [
+          "departments",
+          async () => {
+            const res = await listdept();
+            return res;
+          },
+        ],
+        ["admins", []],
+      ]);
+      let { fields, relation } = this;
+      if (
+        !fields ||
+        !relation ||
+        !fields instanceof Array ||
+        !relation instanceof Array
+      ) {
+        throw new Error("fields或relation格式错误");
+      }
+      fields
+        .sort((a, b) => a.sort - b.sort)
+        .forEach((i) => {
+          i._relations = relation.find(
+            (j) => j.link_table_name.split("_")[1] === i.field
+          );
+          if (i.select_item && typeof i.select_item === "object") {
+            let keys = Object.keys(i.select_item);
+            i._params = keys.map((key) => {
+              return {
+                key,
+                value: /^\d*$/.test(i.select_item[key])
+                  ? Number(i.select_item[key])
+                  : i.select_item[key],
+              };
+            });
+          }
+          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;
+                });
+            }
+          }
+        });
+
+      const detail = await show({
+        id: this.$route.query.id,
+        table_name: this.customForm.tableName,
+      });
+      this.detail = detail;
+    },
+
+  },
+
+  computed: {
+    contentFormat() {
+      return function (i) {
+        let { _relations } = i;
+        if (_relations && _relations.link_table_name) {
+          if (
+            _relations.link_relation === "hasOne" ||
+            _relations.link_relation === "newHasOne"
+          ) {
+            return (
+              this.detail[_relations.link_with_name]?.name ||
+              this.detail[_relations.link_with_name]?.no ||
+              this.detail[_relations.link_with_name]?.value
+            );
+          }
+          if (
+            _relations.link_relation === "hasMany" ||
+            _relations.link_relation === "newHasMany"
+          ) {
+            return this.detail[_relations.link_with_name]
+              ?.map((o) => o?.original_name || o?.name || o?.no || o?.value)
+              ?.toString();
+          }
+
+          return;
+        }
+        if (i._params && i._params.length > 0) {
+          return i._params.find((j) => j.value == this.detail[i.field])?.key;
+        }
+
+        return this.detail[i.field];
+      };
+    },
+  },
+  created() {
+    this.getFields();
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-card {
+  margin-bottom: 20px;
+}
+::v-deep .el-empty__image {
+  width: 120px;
+}
+
+a {
+  color: red;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+a:hover {
+  color: red;
+  text-decoration: underline;
+}
+</style>
diff --git a/src/views/component/table.vue b/src/views/component/table.vue
index f8c8fad..611a45c 100644
--- a/src/views/component/table.vue
+++ b/src/views/component/table.vue
@@ -411,16 +411,7 @@ export default {
         ['admins',[]]
       ])
       let { fields, relation } = res;
-      let fieldRes = await fieldIndex(
-        {
-          page: 1,
-          page_size: 999,
-          custom_form_id: this.customForm.customFormId,
-          sort_name: "sort",
-          sort_type: "asc",
-        },
-        false
-      );
+      let fieldRes = fields.sort((a,b) => a.sort - b.sort)
       if (
         !fields ||
         !relation ||
diff --git a/src/views/system/components/linkWith.vue b/src/views/system/components/linkWith.vue
index f76d712..a2a6968 100644
--- a/src/views/system/components/linkWith.vue
+++ b/src/views/system/components/linkWith.vue
@@ -45,6 +45,29 @@ export default {
 
       list: [],
       table: [
+        {
+          prop: 'custom_form_field',
+          label: '对应显示字段',
+          customFn: (row) => {
+            return (
+              <el-select size="mini"
+                         value={ row.custom_form_field }
+                         on={{
+                           ['change']:e => {
+                             row.custom_form_field = e
+                           }
+                         }}>
+                {
+                  this.localFields.map(i => {
+                    return (
+                      <el-option value={ i.field } label={ i.name }></el-option>
+                    )
+                  })
+                }
+              </el-select>
+            );
+          },
+        },
         {
           prop: "local_key",
           label: "关联本地字段",
diff --git a/src/views/system/form.vue b/src/views/system/form.vue
index 6001fb6..6d4ad44 100644
--- a/src/views/system/form.vue
+++ b/src/views/system/form.vue
@@ -3,12 +3,28 @@
     <!-- 查询配置 -->
     <div>
       <div ref="lxHeader">
-        <LxHeader icon="md-apps" text="自定义表单" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+        <LxHeader
+          icon="md-apps"
+          text="自定义表单"
+          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
+        >
           <div slot="content"></div>
           <slot>
             <div>
-              <Button type="primary" style="margin-left: 10px" @click="$refs['xyTable'].getTableData()">查询</Button>
-              <Button type="primary"  style="margin-left: 10px" @click="$refs['addForm'].type = 'add',$refs['addForm'].show()">新增</Button>
+              <Button
+                type="primary"
+                style="margin-left: 10px"
+                @click="$refs['xyTable'].getTableData()"
+                >查询</Button
+              >
+              <Button
+                type="primary"
+                style="margin-left: 10px"
+                @click="
+                  ($refs['addForm'].type = 'add'), $refs['addForm'].show()
+                "
+                >新增</Button
+              >
             </div>
           </slot>
         </LxHeader>
@@ -22,20 +38,48 @@
       :destroy-action="destroy"
       :border="true"
       :table-item="table"
-      @editor="row => {
-        $refs['addForm'].setType('editor');
-        $refs['addForm'].setId(row.id);
-        $refs['addForm'].show();
-      }">
+      @editor="
+        (row) => {
+          $refs['addForm'].setType('editor');
+          $refs['addForm'].setId(row.id);
+          $refs['addForm'].show();
+        }
+      "
+    >
       <template #setting="scope">
-        <Button type="primary"
-                size="small"
-                style="margin-right: 6px;"
-                @click="$refs['formEditor'].set(['custom_form_id','custom_form'],[scope.row.id,scope.row]),$refs['formEditor'].show()">字段</Button>
-        <Button type="primary"
-                size="small"
-                style="margin-right: 6px;"
-                @click="$refs['linkWith'].set(['tableName','copyTable'],[scope.row.table_name,deepCopy(scope.row)]),$refs['linkWith'].show();">关联</Button>
+        <Button
+          type="primary"
+          size="small"
+          style="margin-right: 6px"
+          @click="
+            $refs['formEditor'].set(
+              ['custom_form_id', 'custom_form'],
+              [scope.row.id, scope.row]
+            ),
+              $refs['formEditor'].show()
+          "
+          >字段</Button
+        >
+        <Button
+          type="primary"
+          size="small"
+          style="margin-right: 6px"
+          @click="
+            $refs['linkWith'].set(
+              ['tableName', 'copyTable'],
+              [scope.row.table_name, deepCopy(scope.row)]
+            ),
+              $refs['linkWith'].show()
+          "
+          >关联</Button
+        >
+        <Button
+          type="primary"
+          size="small"
+          style="margin-right: 6px"
+          @click="clone(scope)"
+          >克隆</Button
+        >
       </template>
     </xy-table>
 
@@ -46,7 +90,7 @@
 </template>
 
 <script>
-import { index,destroy } from '@/api/system/customForm'
+import { index, destroy, clone } from "@/api/system/customForm";
 import { authMixin } from "@/mixin/authMixin";
 
 import LxHeader from "@/components/LxHeader/index.vue";
@@ -55,50 +99,101 @@ import formEditor from "@/views/system/components/formEditor.vue";
 import linkWith from "@/views/system/components/linkWith.vue";
 import { deepCopy } from "@/utils";
 export default {
-  components:{
-    LxHeader,addForm,formEditor,linkWith
-
+  components: {
+    LxHeader,
+    addForm,
+    formEditor,
+    linkWith,
   },
   mixins: [authMixin],
   data() {
     return {
-      select:{
-        page:1,
-        page_size:10
+      inputValue: "",
+      select: {
+        page: 1,
+        page_size: 10,
       },
-      list:[],
-      table:[
+      list: [],
+      table: [
         {
-          type: 'index',
-          label:'编号',
-          width:100
+          type: "index",
+          label: "编号",
+          width: 100,
         },
         {
-          prop:'table_name',
-          label:'表名',
+          prop: "table_name",
+          label: "表名",
           //width:180,
-          sortable:'custom',
+          sortable: "custom",
         },
         {
-          prop:'name',
-          label:'名称',
-         // width:200,
-          sortable:'custom',
+          prop: "name",
+          label: "名称",
+          // width:200,
+          sortable: "custom",
         },
-      ]
-    }
+      ],
+    };
   },
   methods: {
     deepCopy,
-    index,destroy,
-
+    index,
+    destroy,
+    clone ({ row }) {
+      const h = this.$createElement;
+      this.$msgbox({
+        title: "表克隆",
+        message: h("div", [
+          h("span", `克隆表:${row.name}`)
+        ]),
+        showCancelButton: true,
+        beforeClose: (action, instance, done) => {
+          if (action === "confirm") {
+            instance.confirmButtonLoading = true;
+            instance.confirmButtonText = "执行中...";
+            clone({
+              table_name: row.table_name
+            }).then(res => {
+              instance.confirmButtonLoading = false;
+              done();
+              this.$refs['xyTable'].getTableData()
+              this.$message({
+                type: 'success',
+                message: '克隆成功'
+              })
+            }).catch(err => {
+              instance.confirmButtonLoading = false;
+            })
+          } else {
+            done();
+          }
+        },
+      }).then((action) => {
+      });
+    },
   },
   computed: {},
-  mounted() {
-  }
-}
+  mounted() {},
+};
 </script>
 
 <style scoped lang="scss">
-
+.form-input {
+  display: block;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  color: #606266;
+  line-height: 2;
+  transition: all 0.2s;
+  padding: 0 15px;
+  margin-top: 10px;
+  &:hover {
+    border-color: #c0c4cc;
+  }
+  &:focus {
+    outline: none;
+    border-color: #0077cc;
+  }
+}
 </style>