表格弹框添加必填项和验证

src/components/AdvancedQuery/index.vue

@@ -211,7 +211,7 @@ export default {
     queryHandler () {
       const colDatas = this.authMsg
       if (colDatas?.length) {
-        const columns = colDatas.filter(item => item.isdisplay != 0)
+        const columns = colDatas.filter(item => item.isfiltercolumn)
         const datas = _.orderBy(columns, ['displaynumber'], ['asc', 'desc'])
         this.getColumnSet(datas)
       }

src/components/SimpleTable/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="table-wrapper">
     <el-table ref="table" v-el-table-infinite-scroll="load" :data="dealedTableData" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :span-method="tableSpanMethod" :show-summary="showSummary" :summary-method="tableSummaryMethod" :height="height" stripe fit border @cell-click="cellClickHandler">
-      <el-table-column v-for="col in filteredTableCols" :key="col.columncode" :prop="col.columncode" :label="col.columnname" :width="col.width" :show-overflow-tooltip="showOverflowTooltip" :formatter="tableFormatter">
+      <el-table-column v-for="col in filteredTableCols" :key="col.columncode" :prop="col.columncode" :label="col.columnname" :width="col.displaywidth" :show-overflow-tooltip="showOverflowTooltip" :formatter="tableFormatter">
         <template #header>
           <el-tooltip :content="col.columndescribe || col.columnname" placement="top">
             <TableHeaderCell :label="col.columnname" :filter-options="tableDataFilters[col.columncode]" :filter-values.sync="filterValues[col.columncode]" filter-style="arrow" :sortable="!!col.enablesort" :sort-rule.sync="tableDataSortRules[col.columncode]" />

src/views/tablePage/index.vue

@@ -9,11 +9,11 @@
     </div>
     <div class="TablePage_dialog">
       <!--新增/编辑-->
-      <PublicPageDialog :dialog-title="tableTitle" dialogSize="630px" :dialog-drawer="flag" @handleClose="flag = false" @handleSubmit="submitClickHandler">
+      <PublicPageDialog :dialog-title="tableTitle" dialogSize="630px" :dialog-drawer="flag" @handleClose="submitClickClose('ruleForm')" @handleSubmit="submitClickHandler">
         <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
           <el-row :gutter="20">
             <el-col v-for="(item, index) in formItem" :key="index" :span="24">
-              <el-form-item :label="item.columnname">
+              <el-form-item :rules="fromDataReq(item)" :prop="item.columncode" :label="item.columnname">
                 <template v-if="
                         item.dropdownlist ||
                         item.dropdownlist == 0
@@ -29,18 +29,18 @@
                     </el-option>
                   </el-select>
                 </template>
-                <template v-else-if="fromDataType(item.dataType) == 'text'||fromDataType(item.dataType) == 'VARCHAR'">
-                  <el-input size="small" :rows="1" type="textarea" @change="inputChangeHandler(item.columncode)" v-model="tableForm[item.columncode]"></el-input>
+                <template v-else-if="fromDataType(item.datatype) == 'text'||fromDataType(item.datatype) == 'VARCHAR'">
+                  <el-input size="small" @change="inputChangeHandler(item.columncode)" v-model="tableForm[item.columncode]"></el-input>
                 </template>
-                <template v-else-if="fromDataType(item.dataType) == 'date'">
+                <template v-else-if="fromDataType(item.datatype) == 'date'">
                   <el-date-picker class="datetimes" value-format="yyyy-MM-dd" v-model="tableForm[item.columncode]" type="date" placeholder="选择日期" @change="inputChangeHandler(item.columncode)">
                   </el-date-picker>
                 </template>
-                <template v-else-if="fromDataType(item.dataType) == 'datetime'">
+                <template v-else-if="fromDataType(item.datatype) == 'datetime'">
                   <el-date-picker class="datetimes" value-format="yyyy-MM-dd HH:mm:ss" v-model="tableForm[item.columncode]" type="datetime" placeholder="选择日期时间" @change="inputChangeHandler(item.columncode)">
                   </el-date-picker>
                 </template>
-                <template v-else-if="fromDataType(item.dataType) == 'INT' || fromDataType(item.dataType) == 'tinyint'">
+                <template v-else-if="fromDataType(item.datatype) == 'INT' || fromDataType(item.datatype) == 'tinyint'">
                   <el-input size="small" v-model.number="tableForm[item.columncode]" onkeyup="value=value.replace(/[^1-9]/g,'')" @change="inputChangeHandler(item.columncode)"></el-input>
                 </template>
                 <template v-else>
@@ -105,6 +105,7 @@ export default {
       tableObj: {}, //删除数据
       tableOptions: [], //表单数据下拉
       labelWidth: '120px', //表单文字距离
+      fromDataReqCatch: [], //表单规则缓存
     }
   },
   computed: {
@@ -132,6 +133,21 @@ export default {
         }
       }
     },
+    //设置新增修改表单必填类型
+    fromDataReq () {
+      return function (item) {
+        const { dropdownlist, datatype, columnname, isrequired, formatrule } = item
+        const itemType = datatype.replace(/\([^\)]*\)/g, "")
+        const itemReq = isrequired ? true : false
+        const itemRule = formatrule ? true : false
+        if (dropdownlist || dropdownlist == 0) return [{ required: itemReq, message: `${columnname}不能为空`, trigger: 'change' }]
+        else if (itemType == 'date' || itemType == 'datetime') return [{ required: itemReq, type: 'date', message: `${columnname}不能为空`, trigger: 'change' }]
+        else
+          if (itemReq && !itemRule) return [{ required: itemReq, message: `${columnname}不能为空`, trigger: 'blur' }]
+        return [{ required: itemReq, message: `${columnname}不能为空`, trigger: 'blur' }, { pattern: new RegExp(formatrule), message: `请输入合法的${columnname}规则`, trigger: 'blur' }]
+
+      }
+    },
   },
   mounted () {
     this.pageInit()
@@ -239,6 +255,11 @@ export default {
     tableRemove () {
       this.generalDataReception(3, this.tableObj);
     },
+    // 新增/编辑-取消
+    submitClickClose (formName) {
+      this.flag = false
+      this.$refs[formName].resetFields()
+    },
     // 新增/编辑-确认
     submitClickHandler () {
       this.$refs["ruleForm"].validate((valid) => {