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
-        .querySelector(".v-header")
-        .getBoundingClientRect();
+      let lxheader = document.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) => {
-              if (_this.$scopedSlots[item]) {
-                flag = index;
-                return _this.$scopedSlots[item](scope, item, index);
-              } else {
-                if (btns.get(item)) {
+            { (() => {
+              let dom = [];
+              _this.auths.forEach((item, index) => {
+                if (this.btnToMore && _this.moreAuths.find(j => j === item)) return
+                if (_this.$scopedSlots[item]) {
                   flag = index;
-                  return btns.get(item);
+                  dom.push(_this.$scopedSlots[item](scope, item, index));
+                } else {
+                  if (btns.get(item)) {
+                    flag = index;
+                    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();
@@ -829,68 +903,68 @@ export default {
                   scopedSlots={
                     item.customFn || item.type === "expand"
                       ? {
-                          default(scope) {
-                            if (item.type === "expand") {
-                              return item.expandFn(scope);
-                            }
-                            if (item.customFn) {
-                              return item.customFn(scope.row, scope);
-                            }
-                          },
-                        }
+                        default(scope) {
+                          if (item.type === "expand") {
+                            return item.expandFn(scope);
+                          }
+                          if (item.customFn) {
+                            return item.customFn(scope.row, scope);
+                          }
+                        },
+                      }
                       : ""
                   }
                 >
                   {item.multiHd
                     ? item.multiHd.map((item1, index1) => {
-                        return (
-                          <af-table-column
-                            //key={`xy-table-col-multi-${item1.prop}`}
-                            key={String(Math.random()) + index1}
-                            prop={`${item.pProp ? item.pProp + "." : ""}${
-                              item1.prop
-                            }`}
-                            type={item1.type}
-                            index={item1.index}
-                            column-key={String(Math.random() + index1)}
-                            label={item1.label}
-                            prop={item1.prop}
-                            width={item1.width ?? "auto"}
-                            min-width={item1.minWidth}
-                            fixed={item1.fixed}
-                            render-header={item1.renderHeader}
-                            sortable={item1.sortable ?? false}
-                            sort-method={item1.sortMethod}
-                            sort-by={item1.sortBy}
-                            sort-orders={item1.sortOrders}
-                            resizale={item1.resizale ?? false}
-                            formatter={item1.formatter}
-                            show-overflow-tooltip={
-                              item1.showOverflowTooltip ?? true
-                            }
-                            align={item1.align ?? "center"}
-                            header-align={item1.headerAlign ?? "center"}
-                            class-name={`xy-table__row-fade ${item1.className}`}
-                            label-class-name={`xy-table__title-fade ${item1.labelClassName}`}
-                            selectable={item1.selectable}
-                            reserve-selection={item1.reserveSelection}
-                            filters={item1.filters}
-                            filter-placement={item1.filterPlacement}
-                            filter-multiple={item1.filterMultiple}
-                            filter-method={item1.filterMethod}
-                            filtered-value={item1.filteredValue}
-                            scopedSlots={
-                              item1.customFn
-                                ? {
-                                    default(scope1) {
-                                      return item1.customFn(scope1);
-                                    },
-                                  }
-                                : ""
-                            }
-                          ></af-table-column>
-                        );
-                      })
+                      return (
+                        <af-table-column
+                          //key={`xy-table-col-multi-${item1.prop}`}
+                          key={String(Math.random()) + index1}
+                          prop={`${item.pProp ? item.pProp + "." : ""}${
+                            item1.prop
+                          }`}
+                          type={item1.type}
+                          index={item1.index}
+                          column-key={String(Math.random() + index1)}
+                          label={item1.label}
+                          prop={item1.prop}
+                          width={item1.width ?? "auto"}
+                          min-width={item1.minWidth}
+                          fixed={item1.fixed}
+                          render-header={item1.renderHeader}
+                          sortable={item1.sortable ?? false}
+                          sort-method={item1.sortMethod}
+                          sort-by={item1.sortBy}
+                          sort-orders={item1.sortOrders}
+                          resizale={item1.resizale ?? false}
+                          formatter={item1.formatter}
+                          show-overflow-tooltip={
+                            item1.showOverflowTooltip ?? true
+                          }
+                          align={item1.align ?? "center"}
+                          header-align={item1.headerAlign ?? "center"}
+                          class-name={`xy-table__row-fade ${item1.className}`}
+                          label-class-name={`xy-table__title-fade ${item1.labelClassName}`}
+                          selectable={item1.selectable}
+                          reserve-selection={item1.reserveSelection}
+                          filters={item1.filters}
+                          filter-placement={item1.filterPlacement}
+                          filter-multiple={item1.filterMultiple}
+                          filter-method={item1.filterMethod}
+                          filtered-value={item1.filteredValue}
+                          scopedSlots={
+                            item1.customFn
+                              ? {
+                                default(scope1) {
+                                  return item1.customFn(scope1);
+                                },
+                              }
+                              : ""
+                          }
+                        ></af-table-column>
+                      );
+                    })
                     : ""}
                 </af-table-column>
               );
@@ -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);
@@ -1013,7 +1089,7 @@ export default {
       clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%);
       background: rgba(140, 140, 140, 0.7);
       transform: scale(0.8, 0.8) translateX(-22px) translateY(-10px)
-        rotate(-90deg);
+      rotate(-90deg);
     }
   }
 }
@@ -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.linkType = i._relations.link_relation
-                                  this.pickedLinkField.linkTableName = i._relations.link_table_name
+                                  this.pickedLinkField.field = i.field;
+                                  this.pickedLinkField.linkType = i._relations.link_relation;
+                                  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") {
-              this.form[info.field] = this.file[info.field].map(
-                (i) => i?.response?.id
-              );
+            if (
+              info._relations?.link_relation === "newHasMany" ||
+              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 (info.edit_input === "file") {
-              this.form[info.field] = this.file[info.field][0]?.response?.id;
+
+            if (copyForm[info._relations?.link_with_name]?.length > 0) {
+              delete copyForm[info.field];
             }
-          });
-          console.log(this.form);
-          save(Object.assign(this.form, { table_name: this.tableName })).then(
-            (res) => {
-              this.$Message.success({
-                content: `${this.type === "add" ? "新增" : "编辑"}成功`,
-              });
-              this.$emit("refresh");
-              this.hidden();
+            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") {
+                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]
+            //   }
+            // }
+          });
+
+          promiseAll.push(
+            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)) {
-            let keys = Object.keys(i.select_item)
-            linkOb.customFn = row => {
-              let paramMap = new Map()
-              keys.forEach(key => {
-                paramMap.set(i.select_item[key],key)
-              })
-
+          if (i.edit_input === "richtext") {
+            linkOb.customFn = (row) => {
               return (
-                <span>
-                      { paramMap.get(row[i.field]?.toString()) }
-                </span>
-              )
-            }
+                <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]?.toString())}</span>;
+            };
           }
           if (i._relations) {
-            let { link_relation, foreign_key, link_with_name } = i._relations
-            if (link_relation === 'newHasOne' || link_relation === 'hasOne') {
-              linkOb.customFn = row => {
+            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
@@ -490,35 +501,58 @@ export default {
                 } else {
                   return (
                     <span>
-                      { row[link_with_name]?.name ||
+                      {row[link_with_name]?.name ||
                         row[link_with_name]?.no ||
-                        row[link_with_name]?.value }
+                        row[link_with_name]?.value}
                     </span>
                   );
                 }
-              }
+              };
             }
 
-            if (link_relation === "hasMany" || link_relation === 'newHasMany') {
+            if (link_relation === "hasMany" || link_relation === "newHasMany") {
               linkOb.customFn = (row) => {
-                return (
-                  <div>
-                    {row[link_with_name]?.map((o) => (
-                      <span>{o?.name || o?.no || o?.value}</span>
-                    ))}
-                  </div>
-                );
+                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>
+                  );
+                }
               };
             }
           }
-          return Object.assign(
-            {
-              prop: i.field,
-              label: i.name,
-              width: i.width,
-              fixed: i.is_fixed,
-            },
-            linkOb
+
+          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({