2023-10-7

src/components/XyTable/index.vue

@@ -147,9 +147,17 @@ export default {
         return { width: "100%", marginBottom: "20px" };
       },
     },
+    btnToMore: {
+      type: Boolean,
+      default: false
+    },
+    moreAuths: {
+      type: Array,
+      default: () => ['edit','delete']
+    },
     btnWidth: {
       type: Number,
-      default: 140,
+      default: 220,
     },
 
     //  分页相关
@@ -204,10 +212,9 @@ export default {
       return metrics.width;
     },
     initLoad() {
+      if (this.height) return;
       let clientHeight = document.documentElement.clientHeight;
-      let lxheader = document
+      let lxheader = document.querySelector(".v-header")?.getBoundingClientRect();
-        .querySelector(".v-header")
-        .getBoundingClientRect();
       let lxHeader_height = lxheader.height + 25; //查询 头部
       let paginationHeight = 37; //分页的高度
       let topHeight = 50; //页面 头部
@@ -242,6 +249,7 @@ export default {
               .then((res) => {
                 this.listData = this.getByStrkey(res.data, this.resProp);
                 this.totalData = res.data.total;
+                this.$emit('loaded')
                 setTimeout(() => {
                   this.loading = false;
 
@@ -261,6 +269,7 @@ export default {
               .then((res) => {
                 this.listData = this.getByStrkey(res, this.resProp);
                 this.totalData = res.total;
+                this.$emit('loaded')
                 setTimeout(() => {
                   this.loading = false;
 
@@ -368,7 +377,7 @@ export default {
       this.$refs.table.toggleRowExpansion(row, expanded);
     },
     setCurrentRow(row) {
-      this.$refs.table.toggleRowExpansion(row);
+      this.$refs.table.setCurrentRow(row);
     },
     clearSort() {
       this.$refs.table.clearSort();
@@ -385,6 +394,9 @@ export default {
     getSelection(){
       return this.$refs.table?.store?.states?.selection ?? []
     },
+    getListData () {
+      return this.listData
+    },
 
     //table通讯事件
     delete(row, type) {
@@ -444,6 +456,7 @@ export default {
     expandChange(row, expanded) {
       this.$emit("expand-change", row, expanded);
     },
+
     deleteClick(row) {
       this.$emit("delete", row);
       if (this.destroyAction) {
@@ -571,12 +584,68 @@ export default {
       let _this = this;
       if (_this.auths?.length > 0) {
         let btns = new Map();
+        btns.set(
+          "more",
+          <el-dropdown size="small" type="primary" placement="bottom" on={{
+            ['command']:command => {
+              if (command === 'edit') {
+                this.editorClick(scope.row)
+              }
+              else if (command === 'delete') {
+                let that = this
+                this.$confirm("确认删除吗？",{
+                  beforeClose(action,instance,done){
+                    if (action === 'confirm') {
+                      that.deleteClick(scope.row);
+                      done();
+                    } else {
+                      done();
+                    }
+                  }
+                }).then(res => {
+                  this.$message({
+                    type: 'success',
+                    message: '删除成功'
+                  })
+                  this.load()
+                })
+              } else {
+                this.$emit(command, scope.row)
+              }
+            }
+          }}>
+            <i-button
+              type="default"
+              size="small"
+              style="margin-left: 6px;"
+            >
+              更多
+            </i-button>
+
+            <el-dropdown-menu slot="dropdown">
+              {
+                (() => {
+                  let dom = [];
+
+                  this.moreAuths.forEach(i => {
+                    this.$scopedSlots[i] ? dom.push((<el-dropdown-item command={i}>{ this.$scopedSlots[i](scope) }</el-dropdown-item>)) : ''
+                  })
+
+                  if (this.auths.indexOf('edit') !== -1) {
+                    dom.push(<el-dropdown-item divided command="edit">编辑</el-dropdown-item>)
+                  }
+                  if (this.auths.indexOf('delete') !== -1) {
+                    dom.push(<el-dropdown-item command="delete"><span style="color: red;">删除</span></el-dropdown-item>)
+                  }
+                  return dom;
+                })()
+              }
+            </el-dropdown-menu>
+          </el-dropdown>
+        )
         btns.set(
           "detail",
           <i-button
-            style={{
-              "margin-right": "6px",
-            }}
             type="primary"
             size="small"
             ghost={true}
@@ -588,9 +657,6 @@ export default {
         btns.set(
           "edit",
           <i-button
-            style={{
-              "margin-right": "6px",
-            }}
             type="primary"
             size="small"
             onClick={() => _this.editorClick(scope.row, "edit")}
@@ -673,17 +739,25 @@ export default {
               "flex-wrap": "wrap",
             }}
           >
-            {_this.auths.map((item, index) => {
+            { (() => {
+              let dom = [];
+              _this.auths.forEach((item, index) => {
+                if (this.btnToMore && _this.moreAuths.find(j => j === item)) return
                 if (_this.$scopedSlots[item]) {
                   flag = index;
-                return _this.$scopedSlots[item](scope, item, index);
+                  dom.push(_this.$scopedSlots[item](scope, item, index));
                 } else {
                   if (btns.get(item)) {
                     flag = index;
-                  return btns.get(item);
+                    dom.push(btns.get(item));
                   }
                 }
-            })}
+              })
+
+              this.btnToMore? dom.push(btns.get('more')) : ''
+
+              return dom;
+            })() }
           </div>
         );
         return { dom, flag };
@@ -711,7 +785,7 @@ export default {
         }
       },{
         deep: true,
-        immediate: false
+        immediate: true
       })
     } else {
       if(this.action) this.getTableData();
@@ -921,6 +995,7 @@ export default {
 
 ::v-deep .el-table {
   margin-bottom: 0 !important;
+
 }
 .xy-table__setting {
   font-size: 14px;
@@ -933,6 +1008,7 @@ export default {
 .xy-table__page {
   display: flex;
   justify-content: right;
+  align-items: center;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
   background: rgba(140, 140, 140, 0.6);
@@ -1055,4 +1131,8 @@ export default {
     opacity: 1;
   }
 }
+
+Button + Button {
+  margin-left: 6px;
+}
 </style>

src/views/component/dialog.vue

@@ -1,9 +1,10 @@
 <script>
 import linkPickModal from './linkPickModal.vue'
-import { save, show, index } from "@/api/system/baseForm";
+import {save, show, index, destroy} from "@/api/system/baseForm";
 import { getparameter } from "@/api/system/dictionary";
 import { domMap } from "@/const/inputType";
 import { addPropsMap } from "@/const/addProps";
+import {deepCopy} from "@/utils";
 export default {
   components: {
     linkPickModal
@@ -70,7 +71,8 @@ export default {
                         [
                           h('el-input',{
                             props: {
-                              readonly: true
+                              readonly: true,
+                              value: (this.form[i.field] &&  this.form[i.field] instanceof Array) ? this.form[i.field]?.map(i => i.name || i.mingcheng || i.xingming || i.no || i.id)?.toString() : ''
                             },
                             on: {
                               // ['focus']:e => {
@@ -85,9 +87,9 @@ export default {
                               slot: 'append',
                               on: {
                                 click:e => {
-                                  console.log(i)
+                                  this.pickedLinkField.field = i.field;
-                                  this.pickedLinkField.linkType = i._relations.link_relation
+                                  this.pickedLinkField.linkType = i._relations.link_relation;
-                                  this.pickedLinkField.linkTableName = i._relations.link_table_name
+                                  this.pickedLinkField.linkTableName = i._relations.link_table_name;
                                   this.$refs['linkPickModal'].show()
                                 }
                               }
@@ -226,7 +228,14 @@ export default {
         ref: 'linkPickModal',
         props: {
           linkType: this.pickedLinkField.linkType,
-          linkTableName: this.pickedLinkField.linkTableName
+          linkTableName: this.pickedLinkField.linkTableName,
+          field: this.pickedLinkField.field
+        },
+        on: {
+          ['confirm']:({ field, value }) => {
+            this.form[field] = value
+            console.log(this.form)
+          }
         }
       })
     ])
@@ -237,12 +246,14 @@ export default {
       type: "add",
       dialogVisible: false,
       form: {},
+      originalForm: {},
       rules: {},
       file: {},
 
       pickedLinkField: {
         linkType: '',
-        linkTableName: ''
+        linkTableName: '',
+        field: '',
       }
     };
   },
@@ -404,9 +415,12 @@ export default {
 
         }
       });
+
+      this.originalForm = deepCopy(res);
     },
 
     submit() {
+      let promiseAll = [];
       if (this.type === "add") {
         if (this.form.hasOwnProperty("id")) {
           delete this.form.id;
@@ -422,26 +436,125 @@ export default {
       }
       this.$refs["elForm"].validate((validate) => {
         if (validate) {
+          let copyForm = deepCopy(this.form);
           this.formInfo.forEach((info) => {
-            if (info.edit_input === "files") {
+            if (
-              this.form[info.field] = this.file[info.field].map(
+              info._relations?.link_relation === "newHasMany" ||
-                (i) => i?.response?.id
+              info._relations?.link_relation === "hasMany"
+            ) {
+              if (this.originalForm[info._relations.link_with_name]) {
+                this.originalForm[info._relations.link_with_name].map((i) => {
+                  promiseAll.push(
+                    destroy({
+                      id: i.id,
+                      table_name: info._relations.link_table_name,
+                    })
                   );
+                });
+              }
+            }
+
+            if (copyForm[info._relations?.link_with_name]?.length > 0) {
+              delete copyForm[info.field];
+            }
+            if (
+              info._relations?.link_relation === "newHasMany" ||
+              info._relations?.link_relation === "hasMany"
+            ) {
+              if (info.edit_input === "files") {
+                copyForm[info._relations.link_with_name] = this.file[
+                  info.field
+                  ]?.map((i) => {
+                  let copyRelation = i?.response ? deepCopy(i?.response) : "";
+
+                  delete copyRelation.id;
+                  return {
+                    upload_id: i?.response?.id,
+                    ...copyRelation,
+                  };
+                });
+              } else {
+                copyForm[info._relations.link_with_name] = copyForm[
+                  info.field
+                  ]?.map((i) => {
+                  let copyRelation = info._params.find(
+                    (param) => param[info._relations?.foreign_key] === i
+                  )
+                    ? deepCopy(
+                      info._params.find(
+                        (param) => param[info._relations?.foreign_key] === i
+                      )
+                    )
+                    : "";
+                  delete copyRelation.id;
+                  return {
+                    [info._relations.custom_form_field]: i.id,
+                    ...copyRelation,
+                  };
+                });
+              }
+
+              delete copyForm[info.field];
             }
+            if (
+              info._relations?.link_relation === "newHasOne" ||
+              info._relations?.link_relation === "hasOne"
+            ) {
               if (info.edit_input === "file") {
-              this.form[info.field] = this.file[info.field][0]?.response?.id;
+                copyForm[info._relations.link_with_name] = [
+                  {
+                    upload_id: this.file[info.field]?.response?.id,
+                    ...this.file[info.field],
+                  },
+                ];
+              } else {
+                let copyRelation = deepCopy(
+                  info._params.find(
+                    (param) => param.id == this.form[info.field]
+                  )
+                );
+                if (copyRelation) {
+                  delete copyRelation.id;
+                  copyForm[info._relations.link_with_name] = [
+                    {
+                      id: this.form[info._relations?.link_with_name]?.id,
+                      [info.field === "shenhebumen"
+                        ? "dept_id"
+                        : info._relations.foreign_key]: this.form[info.field],
+                      ...copyRelation,
+                    },
+                  ];
+                }
               }
+
+              delete copyForm[info.field];
+            }
+            if (!copyForm[info._relations?.link_with_name]) {
+              delete copyForm[info._relations?.link_with_name];
+            }
+            // if (info._relations?.link_with_name) {
+            //   if (info.edit_input === "files" || info.edit_input === "file") {
+            //     this.form[info._relations.link_with_name] = this.file[info.field].map(i => i?.response);
+            //     delete this.form[info.field]
+            //   } else {
+            //     this.form[info._relations.link_with_name] = this.form[info.field] instanceof Array ? this.form[info.field].map(i => {
+            //       return info._params.find(param => i === param[info._relations.foreign_key])
+            //     }) : [info._params.find(param => this.form[info.field] === param[info._relations.foreign_key])]
+            //     delete this.form[info.field]
+            //   }
+            // }
           });
-          console.log(this.form);
+
-          save(Object.assign(this.form, { table_name: this.tableName })).then(
+          promiseAll.push(
-            (res) => {
+            save(Object.assign(copyForm, { table_name: this.tableName }))
+          );
+          Promise.all(promiseAll).then((res) => {
             this.$Message.success({
               content: `${this.type === "add" ? "新增" : "编辑"}成功`,
             });
             this.$emit("refresh");
             this.hidden();
-            }
+          });
-          );
         }
       });
     },
@@ -476,6 +589,7 @@ export default {
             }
           }
         });
+        document.documentElement.style.setProperty('--column-num', Math.floor(newVal.length / 8).toString())
       },
       //immediate: true,
     },
@@ -498,6 +612,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
+:root {
+  --column-num: 2;
+}
 .uploaded-a {
   color: red;
   text-decoration: none;

src/views/component/linkPickModal.vue

@@ -2,7 +2,7 @@
   <div>
     <el-dialog :visible.sync="dialogVisible">
       <template>
-        <xy-table ref="table" :row-key="row => row.id" :height="380" :action="index" :delay-req="true" :req-opt="select" :table-item="columns"></xy-table>
+        <xy-table ref="table" :row-key="row => row.id" :height="380" :action="index" :delay-req="true" :req-opt="select" :table-item="columns" @row-click="rowPick"></xy-table>
       </template>
       <template #footer>
         <span>
@@ -20,10 +20,12 @@ import { index as customFormIndex , show } from "@/api/system/customForm";
 export default {
   props: {
     linkType: String,
-    linkTableName: String
+    linkTableName: String,
+    field: String
   },
   data() {
     return {
+      tempRow: {},
       dialogVisible: false,
       select: {
         table_name: '',
@@ -104,8 +106,17 @@ export default {
       }
     },
 
+    rowPick (row) {
+      this.tempRow = row
+    },
     confirm () {
-      console.log(this.$refs['table'].getSelection())
+      (this.linkType === 'hasMany' || this.linkType === 'newHasMany') ? this.$emit('confirm',{
+        field: this.field,
+        value: this.$refs['table'].getSelection()
+      }) : this.$emit('confirm',{
+        field: this.field,
+        value: this.tempRow
+      })
       this.dialogVisible = false;
     }
   },
@@ -114,6 +125,13 @@ export default {
     async linkTableName (newVal) {
       await this.getDataTableName();
       await this.getColumns();
+    },
+    dialogVisible (newVal) {
+      if (newVal) {
+
+      } else {
+        this.tempRow = {}
+      }
     }
   }
 };

src/views/component/table.vue

@@ -454,30 +454,41 @@ export default {
       });
       this.form = fields;
       console.log(111, this.form);
-      this.table = this.form
+      this.form
         ?.filter((i) => i.list_show)
-        .map((i) => {
+        .forEach((i) => {
+          if (i._relations) return
           let linkOb = {};
 
-          if (i.select_item && typeof i.select_item === 'object' && !(i.select_item instanceof Array)) {
+          if (i.edit_input === "richtext") {
-            let keys = Object.keys(i.select_item)
+            linkOb.customFn = (row) => {
-            linkOb.customFn = row => {
-              let paramMap = new Map()
-              keys.forEach(key => {
-                paramMap.set(i.select_item[key],key)
-              })
-
               return (
-                <span>
+                <div
-                      { paramMap.get(row[i.field]?.toString()) }
+                  style={{ "max-height": "55px","overflow": "scroll" }}
-                </span>
+                  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]?.toString())}</span>;
+            };
           }
           if (i._relations) {
-            let { link_relation, foreign_key, link_with_name } = i._relations
+            let { link_relation, foreign_key, link_with_name } = i._relations;
-            if (link_relation === 'newHasOne' || link_relation === 'hasOne') {
+            if (link_relation === "newHasOne" || link_relation === "hasOne") {
-              linkOb.customFn = row => {
+              linkOb.customFn = (row) => {
                 if (i.edit_input === "file") {
                   return (
                     <a
@@ -496,29 +507,52 @@ export default {
                     </span>
                   );
                 }
-              }
+              };
             }
 
-            if (link_relation === "hasMany" || link_relation === 'newHasMany') {
+            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) => (
-                      <span>{o?.name || o?.no || o?.value}</span>
+                        <p>
+                          {o?.name ||
+                            o?.no ||
+                            o?.value ||
+                            o?.biaoti ||
+                            o?.mingcheng}
+                        </p>
                       ))}
                     </div>
                   );
+                }
               };
             }
           }
-          return Object.assign(
+
+          let alignLeft = []
+          this.table.push(
+            Object.assign(
               {
                 prop: i.field,
                 label: i.name,
                 width: i.width,
+                align: alignLeft.find(m => m === i.field) ? 'left' : 'center',
                 fixed: i.is_fixed,
               },
               linkOb
+            )
           );
         });
       this.table.unshift({