kz-ui-base 1.0.13 → 1.0.16

package/common/src/components/customForm/searchTable.vue

@@ -0,0 +1,677 @@
+<template>
+  <div class="app-container">
+    <slot></slot>
+    <el-row :gutter="24">
+      <!--树数据-->
+      <el-col v-if="treeSetting.visable" :span="4" :xs="24">
+        <div class="wrapper-container wrapper-container-supplement">
+          <div class="head-container">
+            <el-input
+              v-model="treeShapeName"
+              :placeholder="treeSetting.title"
+              clearable
+              size="small"
+              prefix-icon="el-icon-search"
+              style="margin-bottom: 20px"
+            />
+          </div>
+          <div class="head-container">
+            <el-tree
+              :data="treeShapeOptions"
+              :props="defaultProps"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              ref="tree"
+              default-expand-all
+              @node-click="handleNodeClick"
+            />
+          </div>
+        </div>
+      </el-col>
+      <!--用户数据-->
+      <el-col :span="treeSetting.visable ? 20 : 24" :xs="24">
+        <div class="wrapper-container" v-show="isShowSearch">
+          <el-form
+            :model="listQueryParams"
+            ref="queryForm"
+            :inline="true"
+            label-width="100px"
+          >
+            <component
+              v-for="(searchRule, index) in searchRules"
+              :key="index"
+              :is="
+                searchRule.displayType != null
+                  ? 'KZ_' + searchRule.displayType
+                  : 'KZ_TextBox'
+              "
+              :column="{ text: searchRule.text, property: 'value' }"
+              :entity="searchRule"
+              :setting.sync="searchRule.setting"
+              :value="searchRule.value"
+            >
+            </component>
+            <el-form-item>
+              <el-button
+                type="primary"
+                icon="el-icon-search"
+                size="mini"
+                @click="handleQuery"
+                >搜索</el-button
+              >
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+                >重置</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <div class="wrapper-container">
+          <el-table
+            :border="true"
+            v-loading="listSetting.loading"
+            :data="listData"
+            :highlight-current-row="true"
+            @current-change="onCurrentChange"
+            @selection-change="onSelectionChange"
+          >
+            <el-table-column
+              v-if="isMultiple"
+              type="selection"
+              width="50"
+              align="center"
+            />
+            <template v-for="(column, index) in listColumns">
+              <el-table-column
+                :show-overflow-tooltip="true"
+                :key="index"
+                :label="column.text"
+                align="center"
+                :prop="column.property"
+                v-if="column.visible != false"
+                :min-width="column.width || 100"
+              >
+                <template slot-scope="scope">
+                  <div v-if="column.displayType == 'Upload'">
+                    {{ getFileNickName(scope.row[scope.column.property]) }}
+                  </div>
+                  <div v-else-if="column.displayType == 'DatePicker'">
+                    {{
+                      dateFormat(
+                        scope.row,
+                        column,
+                        scope.row[column.property],
+                        scope.row[column.property]
+                      )
+                    }}
+                  </div>
+                  <div
+                    v-else-if="
+                      column.setting &&
+                      (column.setting.type || column.setting.dictType)
+                    "
+                  >
+                    {{
+                      tableDisplayFormat(
+                        scope.row,
+                        column,
+                        scope.row[column.property]
+                      )
+                    }}
+                  </div>
+                  <div v-else-if="column.htmlFormat">
+                    <span
+                      v-html="
+                        evalFunction(
+                          column.htmlFormat,
+                          scope.row,
+                          column,
+                          scope.row[column.property]
+                        )
+                      "
+                    ></span>
+                  </div>
+                  <div v-else-if="column.htmlFormat">
+                    <span
+                      v-html="
+                        evalFunction(
+                          column.htmlFormat,
+                          scope.row,
+                          column,
+                          scope.row[column.property]
+                        )
+                      "
+                    ></span>
+                  </div>
+                  <div v-else-if="column.format">
+                    {{
+                      evalFunction(
+                        column.format,
+                        scope.row,
+                        column,
+                        scope.row[column.property]
+                      )
+                    }}
+                  </div>
+                  <div v-else-if="column.click">
+                    <el-link
+                      type="primary"
+                      @click="
+                        evalFunction(
+                          column.click,
+                          scope.row,
+                          column,
+                          scope.row[column.property]
+                        )
+                      "
+                      >{{ scope.row[scope.column.property] }}</el-link
+                    >
+                  </div>
+                  <div v-else>
+                    {{ scope.row[scope.column.property] }}
+                  </div>
+                </template>
+              </el-table-column>
+            </template>
+
+            <el-table-column
+              label="操作"
+              align="center"
+              min-width="160"
+              class-name="small-padding fixed-width"
+              v-if="listSetting.isShowOpColumn"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  v-for="(opMenu, index) in listCustomOpMenus"
+                  :key="index"
+                  size="mini"
+                  type="text"
+                  @click="
+                    onListCustomOpMenuClick({ opMenu: opMenu, data: scope.row })
+                  "
+                >
+                  {{ opMenu.text }}
+                </el-button>
+              </template>
+              <!-- <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  @click="onListCustomOpMenuClick(scope.row)"
+                >
+                  选择批次
+                </el-button>
+              </template> -->
+            </el-table-column>
+          </el-table>
+
+          <pagination
+            v-show="listQueryParams.total > 0"
+            :total="listQueryParams.total"
+            :page.sync="listQueryParams.pageNum"
+            :limit.sync="listQueryParams.pageSize"
+            @pagination="getList"
+          />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {
+  listEntity,
+  getEntity,
+  addEntity,
+  updateEntity,
+  delEntity,
+  getUrl,
+  treeSelect,
+} from "@api/common/common";
+import { filePriview, getFilePriviewUrl, getFileNickName } from "@utils/file";
+
+import KZ_DropDownList from "@components/customForm/dropDownList";
+import KZ_TextBox from "@components/customForm/textBox";
+import KZ_Cascader from "@components/customForm/cascader";
+import KZ_CheckBox from "@components/customForm/checkBox";
+import KZ_ColorPicker from "@components/customForm/colorPicker";
+import KZ_DatePicker from "@components/customForm/datePicker";
+import KZ_Switch from "@components/customForm/switch";
+import KZ_Upload from "@components/customForm/upload";
+import KZ_TextArea from "@components/customForm/textarea";
+import KZ_Lookup from "@components/customForm/lookup";
+
+import { getToken } from "@utils/auth";
+import EditDialog from "@components/base/dialog/editDialog";
+import UploadDialog from "@components/base/dialog/uploadDialog";
+import PrintDialog from "@components/base/dialog/printDialog";
+import Treeselect from "@riophae/vue-treeselect";
+
+const ignoreProperties = [
+  "enterpriseId",
+  "sort",
+  "createBy",
+  "createName",
+  "updateBy",
+  "updateName",
+  "updateTime",
+  "isDeleted",
+  "params",
+];
+
+export default {
+  name: "SearchTable",
+  props: {
+    //微服务模块名称
+    moduleName: {
+      type: String,
+      default: function () {
+        return undefined;
+      },
+    },
+    //实体名称-服务名称
+    serviceName: {
+      type: String,
+      default: function () {
+        return undefined;
+      },
+    },
+    //微服务列表方法Action名称
+    getListAction: {
+      type: String,
+      default: function () {
+        return undefined;
+      },
+    },
+    //微服务ApiUrl地址
+    url: {
+      type: String,
+      default: function () {
+        return undefined;
+      },
+    },
+    setting: {
+      type: Object,
+      default: function () {
+        return undefined;
+      },
+    },
+    // 列信息
+    listColumns: {
+      type: Array,
+      default: function () {
+        return [
+          //{ key: 0, text: `用户编码`, property: "userNo", visible: true },
+          //{ key: 1, text: `用户账号`, property: "userAccount", visible: true },
+        ];
+      },
+    },
+    // 启用多选模式
+    isMultiple: {
+      type: Boolean,
+      default: function () {
+        return true;
+      },
+    },
+    // 显示搜索条件
+    isShowSearch: {
+      type: Boolean,
+      default: function () {
+        return true;
+      },
+    },
+    //是否自动生成列
+    isAutoGenerationColumns: {
+      type: Boolean,
+      default: function () {
+        return false;
+      },
+    },
+    //表格是否自动加载数据
+    isAutoLoad: {
+      type: Boolean,
+      default: function () {
+        return true;
+      },
+    },
+    //当前功能主键字段
+    pkField: {
+      type: String,
+      default: function () {
+        return "id";
+      },
+    },
+
+    defaultProps: {
+      type: Object,
+      default: function () {
+        return {
+          children: "children",
+          label: "label",
+        };
+      },
+    },
+
+    //树设定
+    treeSetting: {
+      type: Object,
+      default: function () {
+        return {
+          moduleName: undefined,
+          serviceName: undefined,
+          //树形显示隐藏
+          visable: false,
+          //搜索框标题
+          title: "",
+        };
+      },
+    },
+    // 列表分页参数
+    listQueryParams: {
+      type: Object,
+      default: function () {
+        return {
+          pageNum: 1,
+          pageSize: 10,
+          totalPages: 1,
+          total: 0,
+          orderBy: "id",
+        };
+      },
+    },
+
+    // 列表查询条件
+    searchRules: {
+      type: Array,
+      default: function () {
+        return [
+          //{ key: 0, text: `用户编码`, property: "userNo", value: "", visible: true },
+          //{ key: 1, text: `用户账号`, property: "userAccount", value: "", visible: true },
+        ];
+      },
+    },
+    listCustomOpMenus: {
+      type: Array,
+      default: function () {
+        return [
+          // {  text: "操作", icon: "el-icon-edit", name: "custom1"}
+        ];
+      },
+    },
+    parameter: {
+      type: Array,
+    },
+  },
+  components: {
+    Treeselect,
+    EditDialog,
+    UploadDialog,
+    PrintDialog,
+    KZ_Lookup,
+    KZ_DropDownList,
+    KZ_TextBox,
+    KZ_Cascader,
+    KZ_CheckBox,
+    KZ_ColorPicker,
+    KZ_DatePicker,
+    KZ_Switch,
+    KZ_Upload,
+    KZ_TextArea,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 列表数据
+      listData: [],
+      // 选中数组
+      ids: [],
+      // 选中数组名称
+      idsText: [],
+      listSetting: this.setting || {
+        //获取列表数据的api方法名
+        getListAction: "list",
+        //主键字段
+        pkField: this.pkField,
+        // 遮罩层
+        loading: false,
+        //是否显示合计行
+        isShowSumRow: true,
+        //是否启用行内编辑模式
+        isOpenInlineEditMode: false,
+        //是否显示分页栏
+        isShowPager: true,
+        //是否显示操作栏
+        isShowOpColumn: false,
+      },
+      // 当前选中行实体
+      currentEntity: undefined,
+      // 当前选中行实体集合
+      currentEntities: undefined,
+      //数名称
+      treeShapeName: undefined,
+      //树选项
+      treeShapeOptions: undefined,
+    };
+  },
+  watch: {
+    // 根据名称筛选部门树
+    treeShapeName(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+  created() {
+    if (this.parameter) {
+      this.listQueryParams = { ...this.listQueryParams, ...this.parameter };
+    }
+    //获取树数据
+    if (this.treeSetting.visable) {
+      this.getTreeSelect();
+    }
+    this.listSetting.pkField = this.pkField;
+    if (this.isAutoLoad) {
+      this.getList();
+    }
+  },
+  methods: {
+    getFileNickName: getFileNickName,
+    getFilePriviewUrl: getFilePriviewUrl,
+    filePriview: filePriview,
+    /** 下拉树结构 */
+    getTreeSelect() {
+      treeSelect(this.treeSetting.moduleName).then((response) => {
+        this.treeShapeOptions = response.data;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      let tree = this.treeSetting;
+      this.moduleName = this.treeSetting.moduleName;
+      this.serviceName = this.treeSetting.serviceName;
+      this.listQueryParams[tree.pkField] = data[tree.treeFkField];
+      // if (data.type === "0") {
+      //   this.listQueryParams.deptId = data.id;
+      //   this.listQueryParams.postId = undefined;
+      // } else if (data.type === "1") {
+      //   this.listQueryParams.postId = data.id;
+      //   this.listQueryParams.deptId = undefined;
+      // }
+      this.getList();
+    },
+    evalFunction(fn, row, column) {
+      return this[fn](row, column);
+    },
+    /** 获取查询条件 */
+    getSearchParams(pagerInfo, searchRules) {
+      if (!pagerInfo) pagerInfo = this.listQueryParams;
+      if (!searchRules) searchRules = this.searchRules;
+      var searchParams = {};
+      for (var key in pagerInfo) {
+        searchParams[key] = pagerInfo[key];
+      }
+      if (this.searchRules) {
+        for (var item of searchRules) {
+          searchParams[item.property] = item.value;
+        }
+      }
+      return searchParams;
+    },
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      var self = this;
+      var responseFunc = (response) => {
+        if (
+          self.isAutoGenerationColumns &&
+          (!this.listColumns || this.listColumns.length == 0) &&
+          response.rows &&
+          response.rows.length > 0
+        ) {
+          self.autoGenerationColumns(response.rows[0]);
+        }
+        self.listData = response.rows;
+        self.listQueryParams.total = Number(response.total);
+        self.loading = false;
+      };
+
+      if (this.url) {
+        getUrl(this.url, this.getSearchParams())
+          .then(responseFunc)
+          .catch(() => {
+            this.loading = false;
+          });
+      } else {
+        if (this.moduleName && this.serviceName) {
+          listEntity(
+            this.moduleName,
+            this.serviceName,
+            this.getSearchParams(),
+            this.listSetting.getListAction || this.getListAction
+          )
+            .then(responseFunc)
+            .catch(() => {
+              this.loading = false;
+            });
+        }
+      }
+    },
+    autoGenerationColumns(data) {
+      if (!this.listColumns) this.listColumns = [];
+      this.listColumns.splice(0, this.listColumns.length);
+      for (var key in data) {
+        var ignore = false;
+        for (var ignoreProperty of ignoreProperties) {
+          if (key == ignoreProperty) {
+            ignore = true;
+            break;
+          }
+        }
+        if (ignore) continue;
+        var column = { text: key, property: key };
+        this.listColumns.push(column);
+      }
+    },
+    /** 表格列显示格式化方法 */
+    tableDisplayFormat(row, column, cellValue) {
+      for (var col of this.listColumns) {
+        if (col.property == column.property) {
+          if (col.setting) {
+            var result = null;
+            if (col.setting.dictType) {
+              result = this.getDictLabelByValue(
+                col.setting.dictType,
+                cellValue
+              );
+            } else {
+              switch (col.setting.type) {
+                case "User":
+                  result = this.getNickNameByUserId(cellValue);
+                  break;
+              }
+            }
+            return result || cellValue;
+          }
+          break;
+        }
+      }
+      return cellValue;
+    },
+
+    /** 更新列表列属性设置 */
+    updateListColumn(option, columnNames) {
+      this.updateColumns(option, columnNames, this.listColumns);
+    },
+    updateColumns(option, columnNames, columns) {
+      for (var columnName of columnNames) {
+        for (var column of columns) {
+          if (column.property == columnName) {
+            for (var key in option) {
+              column[key] = option[key];
+            }
+            break;
+          }
+        }
+      }
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.listQueryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      for (var searchRule of this.searchRules) {
+        this.$set(searchRule, "value", undefined);
+      }
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    onCurrentChange(val) {
+      this.currentEntity = val;
+      this.single = true;
+      this.multiple = false;
+      this.$emit("change", this.currentEntity);
+    },
+    // 多选框选中数据
+    onSelectionChange(selection) {
+      this.ids = selection.map((item) => item[this.pkField]);
+      if (this.displayField)
+        this.idsText = selection.map((item) => item[this.displayField]);
+      this.single = selection.length == 1;
+      this.multiple = selection.length > 1;
+      if (selection.length > 0) this.currentEntity = selection[0];
+      else this.currentEntity = undefined;
+      //this.setOpMenuEnable();
+      this.currentEntities = selection;
+      this.$emit("change", this.currentEntities);
+    },
+    // 表单重置
+    reset() {
+      var entity = {};
+      for (var key in this.currentEntity) {
+        entity[key] = undefined;
+      }
+      for (var column of this.editColumns) {
+        entity[column.property] = column.default;
+      }
+      this.currentEntity = entity;
+    },
+    onListCustomOpMenuClick(args) {
+      this.$emit("onListCustomOpMenuClick", args);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.wrapper-container-supplement {
+  min-height: 415px;
+}
+</style>