kz-ui-base 1.0.45 → 1.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kz-ui-base",
-  "version": "1.0.45",
+  "version": "1.0.46",
   "description": "",
   "main": "index.js",
   "scripts": {

package/views/bd/attribute/index.vue

@@ -0,0 +1,559 @@
+<template>
+  <div class="app-container">
+    <div class="wrapper-container" v-show="showSearch">
+      <el-form :model="queryParams" ref="queryForm" :inline="true">
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="属性编号" prop="attributeNo">
+              <el-input
+                v-model="queryParams.attributeNo"
+                placeholder="请输入属性编号"
+                clearable
+                size="small"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="属性名称" prop="attributeName">
+              <el-input
+                v-model="queryParams.attributeName"
+                placeholder="请输入属性名称"
+                clearable
+                size="small"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="属性类别" prop="attributeTypeCode">
+              <dict-select clearable type="attribute_type_code" v-model="queryParams.attributeTypeCode" placeholder="请选择属性类别"></dict-select>
+            </el-form-item>
+          </el-col>
+
+         <div style="float: right">
+              <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>
+         </div>
+        </el-row>
+      </el-form>
+    </div>
+
+    <div class="wrapper-container">
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+          >新增
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="success"
+            icon="el-icon-edit"
+            size="mini"
+            :disabled="editButtonDisabled"
+            @click="handleUpdate"
+          >修改
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="danger"
+            icon="el-icon-delete"
+            size="mini"
+            @click="handleDelete"
+          >删除
+          </el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" :sortVisible="false" @queryTable="getList"/>
+      </el-row>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        :height="tableHeight"
+        :data="attributeList"
+        :border="true"
+        default-expand-all
+        @selection-change="onSelectionChange"
+        :header-cell-style= "{'text-align':'center'}"
+      >
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column type="index" label="序号" width="50px" align="center">
+          <template scope="scope">
+            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="attributeNo" label="属性编号" min-width="120" align="left"/>
+        <el-table-column prop="attributeName" label="属性名称" min-width="120" align="left"/>
+        <el-table-column label="录入类型" min-width="120" align="left">
+          <template scope="scope">
+            {{ getDictLabelByValue('keyin_type_code', scope.row.keyInTypeCode) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="dictType" label="选项值字典类型" min-width="120" align="left"/>
+        <el-table-column prop="attributeTypeCode" label="属性类型" min-width="120" align="left">
+          <template scope="scope">
+            {{ scope.row.attributeTypeCode!= null && scope.row.attributeTypeCode.length > 0 ? scope.row.attributeTypeCode.split(",").map(x=>getDictLabelByValue('attribute_type_code', x)).join(", "): '' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="tablefieldName1" label="对照字段名1" min-width="120" align="left"/>
+        <el-table-column prop="useSystem1" label="使用系统1" min-width="120" align="left"/>
+        <el-table-column prop="tablefieldName2" label="对照字段名2" min-width="120" align="left"/>
+        <el-table-column prop="useSystem2" label="使用系统2" min-width="120" align="left"/>
+        <el-table-column prop="tablefieldName3" label="对照字段名3" min-width="120" align="left"/>
+        <el-table-column prop="useSystem3" label="使用系统3" min-width="120" align="left"/>
+      </el-table>
+      <pagination
+        :total="queryParams.total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+      <div class="table-container-supplement" style="height: 10px;"/>
+    </div>
+
+    <!-- 添加或修改属性对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="450px" append-to-body v-dialogDrag v-dialogDragHeight>
+      <el-form
+        ref="form"
+        :model="attribute"
+        label-width="120px"
+        style="margin-right: 20px"
+        :rules="rules">
+        <el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="属性编号" prop="attributeNo">
+                <el-input v-model="attribute.attributeNo" :disabled="attributeNoDisabled"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="属性名称" prop="attributeName">
+                <el-input v-model="attribute.attributeName"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="录入类型" prop="keyInTypeCode">
+                <dict-select v-model="attribute.keyInTypeCode" type="keyin_type_code" false-label="false"
+                             @change="keyInTypeCodeChange"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="选项值字典类型" prop="dictType">
+                <el-select v-model="attribute.dictType" filterable placeholder="请选择" :disabled="dictTypeDisabled">
+                  <el-option
+                    v-for="item in dictOption"
+                    :key="item.dictType"
+                    :label="item.label"
+                    :value="item.dictType">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <!--小数位数-->
+            <el-col :span="24">
+              <el-form-item label="小数位数" prop="decimalPlace" v-if="attribute.keyInTypeCode == KEY_IN_TYPE_CODE.INPUT_NUMBER">
+               <el-input @input="handleDecimalInput" v-model="attribute.decimalPlace"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="属性类型" prop="attributeTypeCode">
+                <el-select ref="typeSelection" multiple v-model="selectedAttributeTypeCodes" placeholder="请选择">
+                  <el-option
+                    v-for="item in attributeTypeOption"
+                    :key="item.dictValue"
+                    :label="item.dictLabel"
+                    :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="对照字段名1" prop="tablefieldName1">
+                <el-input v-model="attribute.tablefieldName1"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="使用系统1" prop="useSystem1">
+                <el-input v-model="attribute.useSystem1"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="对照字段名2" prop="tablefieldName2">
+                <el-input v-model="attribute.tablefieldName2"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="使用系统2" prop="useSystem2">
+                <el-input v-model="attribute.useSystem2"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="对照字段名3" prop="tablefieldName3">
+                <el-input v-model="attribute.tablefieldName3"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="使用系统3" prop="useSystem3">
+                <el-input v-model="attribute.useSystem3"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import { listAttribute, addAttribute, updateAttribute, delAttribute} from "@srcApi/bd/attribute"
+  import { optionselect} from "@srcApi/system/dict/type"
+  import {KEY_IN_TYPE_CODE} from "@/constant/bd";
+  export default {
+    name: "AttributeIndex",
+    data() {
+      return {
+        //屏幕高度
+        tableHeight : "700",
+        // 遮罩层
+        loading: true,
+        // 提交状态
+        submitLoading: false,
+        // 显示搜索条件
+        showSearch: true,
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          total: 0,
+          pageNum: 1,
+          pageSize: 10,
+          attributeNo: '',
+          attributeName: '',
+          attributeTypeCode: ''
+        },
+        selectedAttributeTypeCodes: [],
+        attributeList: [],
+        // 表单参数
+        attribute: {
+          attributeNo: '',
+          attributeName: '',
+          keyInTypeCode: '',
+          dictType: '',
+          decimalPlace: '',
+          attributeTypeCode: '',
+          tablefieldName1: '',
+          tablefieldName2: '',
+          tablefieldName3: '',
+          useSystem1: '',
+          useSystem2: '',
+          useSystem3: '',
+        },
+        rules: {},
+        multipleSelection: [],
+
+        // 字典表数据
+        dictOption: [],
+        attributeTypeOption: [],
+      }
+    },
+
+    mounted() {
+      this.$nextTick(function () {
+        this.tableHeight = window.innerHeight - this.$refs.table.$el.getBoundingClientRect().top - 80;
+        // 监听窗口大小变化
+        const that = this;
+        window.onresize = function () {
+          that.tableHeight = window.innerHeight -that.$refs.table.$el.getBoundingClientRect().top - 80;
+        };
+      });
+    },
+    computed: {
+      KEY_IN_TYPE_CODE() {
+        return KEY_IN_TYPE_CODE
+      },
+      editButtonDisabled() {
+        return this.multipleSelection.length !== 1
+      },
+      dictTypeDisabled() {
+        return this.attribute.keyInTypeCode !== KEY_IN_TYPE_CODE.SELECT_ENUM
+      },
+      attributeNoDisabled() {
+        return !!this.attribute.id
+      },
+
+    },
+    created() {
+      this.loadDictCache()
+      this.getList()
+    },
+    watch:{
+      showSearch(){
+        let that = this;
+        setTimeout(() => {
+          that.tableHeight = window.innerHeight - that.$refs.table.$el.getBoundingClientRect().top - 80;
+        }, 0);
+      },
+    },
+    methods: {
+      /** 查询部门列表 */
+      getList() {
+        this.loading = true
+        const pageNum = this.queryParams.pageNum ? this.queryParams.pageNum : 1;
+        const pageSize = this.queryParams.pageSize ? this.queryParams.pageSize : 10;
+        const orderByColumn = 'attribute_no'
+        listAttribute({ op: 'AND', ...this.getSearchParams(), pageNum, pageSize, orderByColumn }).then(response => {
+          this.attributeList = response.data
+          this.queryParams.total = Number(response.total);
+          this.loading = false
+        })
+      },
+      getSearchParams() {
+        const searchParams = { rules: [] }
+        searchParams.rules = [
+          {
+            op: 'LI',
+            property: 'attributeNo',
+            value: this.queryParams.attributeNo
+          },
+          {
+            op: 'LI',
+            property: 'attributeName',
+            value: this.queryParams.attributeName
+          },
+          {
+            op: 'EQ',
+            property: 'attributeTypeCode',
+            value: this.queryParams.attributeTypeCode
+          },
+        ]
+        return searchParams
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false
+        this.reset()
+      },
+
+      // 表单重置
+      reset() {
+        this.attribute = {
+          attributeNo: '',
+          attributeName: '',
+          keyInTypeCode: '',
+          dictType: '',
+          attributeTypeCode: '',
+          tablefieldName1: '',
+          tablefieldName2: '',
+          tablefieldName3: '',
+          useSystem1: '',
+          useSystem2: '',
+          useSystem3: ''
+        }
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1
+        this.getList()
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm")
+        this.handleQuery()
+      },
+      /** 新增按钮操作 */
+      handleAdd() {
+        this.reset()
+        this.$nextTick(() => {
+          this.$refs["form"].clearValidate()
+        });
+        this.$set(this,'selectedAttributeTypeCodes', []);
+        this.rules = {
+          attributeNo: [{ required: true, message: "属性编号不能为空", trigger: "blur" }],
+          attributeName: [{ required: true, message: "属性名称不能为空", trigger: "blur" }],
+          decimalPlace: [{ required: true, message: "小数位数不能为空", trigger: "blur" }]
+        }
+        this.open = true
+        this.title = "新增属性"
+      },
+      /** 修改按钮操作 */
+      handleUpdate() {
+        if(this.multipleSelection && this.multipleSelection.length === 1) {
+          this.reset()
+          this.open = true
+          this.title = "修改属性"
+          const obj = {...this.multipleSelection[0]}
+          this.attribute = obj;
+          this.$set(this,'selectedAttributeTypeCodes',  (obj.attributeTypeCode == null || obj.attributeTypeCode === '') ? [] : obj.attributeTypeCode.split(","));
+          this.rules = {
+            attributeName: [{ required: true, message: "属性名称不能为空", trigger: "blur" }],
+            decimalPlace: [{ required: true, message: "小数位数不能为空", trigger: "blur" }]
+          }
+        }
+      },
+
+      /** 删除按钮操作 */
+      handleDelete() {
+        this.$confirm('是否确认删除选中的属性?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          return delAttribute({attributes: this.multipleSelection})
+        }).then(() => {
+          this.getList()
+          this.msgSuccess("删除成功")
+        }).catch(() => {
+        })
+      },
+
+      /** 提交按钮 */
+      submitForm: function () {
+        this.submitLoading = true
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.attribute.id) {
+              let payload = Object.assign({}, this.attribute);
+
+              if (this.selectedAttributeTypeCodes != null && this.selectedAttributeTypeCodes.length > 0) {
+                payload.attributeTypeCode = this.selectedAttributeTypeCodes.sort().join(",");
+              } else {
+                payload.attributeTypeCode = "";
+              }
+
+              updateAttribute(payload).then(response => {
+                this.msgSuccess("修改成功")
+                this.open = false
+                this.getList()
+              })
+            } else {
+              let payload = Object.assign({}, this.attribute);
+              if (this.selectedAttributeTypeCodes != null && this.selectedAttributeTypeCodes.length > 0) {
+                payload.attributeTypeCode = this.selectedAttributeTypeCodes.sort().join(",");
+              } else {
+                payload.attributeTypeCode = "";
+              }
+              addAttribute(payload).then(response => {
+                this.msgSuccess("新增成功")
+                this.open = false
+                this.getList()
+              })
+            }
+          }
+        })
+        this.submitLoading = false
+      },
+
+      keyInTypeCodeChange(value){
+        if(value !== KEY_IN_TYPE_CODE.SELECT_ENUM){
+          this.$set(this.attribute,'dictType','');
+        }
+      },
+
+      loadDictCache() {
+        optionselect().then(response => {
+          for(let i=0;i<response.data.length;i++){
+            const sysDictType = response.data[i];
+            const dict = {
+              label: sysDictType.dictName +"  "+ sysDictType.dictType,
+              dictType: sysDictType.dictType
+            }
+            this.dictOption.push(dict)
+          }
+        })
+
+        this.getDicts('attribute_type_code').then((response) => {
+          this.attributeTypeOption = response.data
+        })
+      },
+
+      onSelectionChange(val) {
+        this.multipleSelection = val
+      },
+
+      handleDecimalInput(value) {
+        const newValue = value.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
+        this.attribute.decimalPlace = newValue.slice(0, 2);
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped >
+  .span_class {
+    display: block;
+    width: 5px;
+    height: 21px;
+    background-color: #409eff;
+    position: absolute;
+  }
+
+  .add-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 32px;
+    background: #FFFFFF;
+    border-radius: 4px;
+    border: 1px dashed #D9D9D9;
+    cursor: pointer;
+  }
+
+  .add-btn i {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.65);
+  }
+
+  .add-btn span {
+    height: 22px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0,0,0,0.65);
+    line-height: 22px;
+    margin-left: 8px;
+  }
+
+  ::v-deep label {
+    font-weight: 500;
+  }
+
+  ::v-deep .el-input.is-disabled .el-input__inner {
+    color: #606266;
+  }
+
+  ::v-deep .el-form-item {
+    margin-bottom: 16px;
+  }
+
+  ::v-deep .el-form-item--small.el-form-item {
+    margin-bottom: 8px;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 24px 24px 0 24px;
+  }
+
+  ::v-deep .el-dialog__footer {
+    text-align: center;
+    border-top: 1px solid #ededed;
+    padding: 12px 0 12px 0;
+  }
+
+  ::v-deep .el-dialog__header {
+    padding: 16px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #ededed;
+  }
+</style>