hd-idevvue3 3.0.2 → 3.0.4

package/src/hdcom/GridExField.vue

@@ -1,115 +1,190 @@
 <template>
-  <el-dialog title="扩展字段设置" :visible.sync="visible" width='65%' append-to-body top="2vh">
+  <el-dialog
+    title="扩展字段设置"
+    :visible.sync="visible"
+    width="65%"
+    append-to-body
+    top="2vh"
+  >
     <el-container style="height: 80vh; border: 1px solid #eee">
       <el-main class="gridShow">
-        <hd-com-grid ref="grid" :hdQuery="hdQuery" url="/webresources/login/tech/ComExFieldCustom" not-init no-sets
-                     ck-hide no-sort index-hide :hd-btn-tool="false"
-                     rec-hide page-hide :default-sort="{prop: 'sortNo', order: 'ascending'}">
-
+        <hd-com-grid
+          ref="grid"
+          :hdQuery="hdQuery"
+          url="/webresources/login/tech/ComExFieldCustom"
+          not-init
+          no-sets
+          ck-hide
+          no-sort
+          index-hide
+          :hd-btn-tool="false"
+          rec-hide
+          page-hide
+          :default-sort="{ prop: 'sortNo', order: 'ascending' }"
+        >
           <!--  <div class="filter-container" slot="query">
-              &lt;!&ndash;     <el-input @keyup.enter.native="$refs.grid.doQuery()" style="width: 200px;" class="filter-item"
-                             placeholder="名称"
-                             v-model="hdQuery.query.anyQuery">
-                   </el-input>
-                   <el-button class="filter-item" @click="$refs.grid.doQuery()" icon="search" type="primary" ref="q"
-                              keyType="query">搜索
-                   </el-button>&ndash;&gt;
-              <el-button class="filter-item" type="primary" @click="doAdd()" icon="edit" ref="a"
-                         keyType="add">新增
-              </el-button>
-            </div>-->
+                  &lt;!&ndash;     <el-input @keyup.enter.native="$refs.grid.doQuery()" style="width: 200px;" class="filter-item"
+                                 placeholder="名称"
+                                 v-model="hdQuery.query.anyQuery">
+                       </el-input>
+                       <el-button class="filter-item" @click="$refs.grid.doQuery()" icon="search" type="primary" ref="q"
+                                  keyType="query">搜索
+                       </el-button>&ndash;&gt;
+                  <el-button class="filter-item" type="primary" @click="doAdd()" icon="edit" ref="a"
+                             keyType="add">新增
+                  </el-button>
+                </div>-->
 
           <!-- <el-table-column width="60px" align="center" label="操作" fixed="right">
-             <template slot-scope="scope">
-               <hd-btn icon="el-icon-edit" hint="编辑" @click.stop="$refs.grid.doEdit(scope.row)"
-                       v-if="!scope.row.isEdit">
-               </hd-btn>
-               <hd-btn hint="撤销" @click.stop="$refs.grid.doCancel(scope.row)" v-if="scope.row.isEdit">
-                 <svg-icon icon-class="undo"/>
-               </hd-btn>
-               <hd-btn icon="el-icon-check" hint="保存" @click.stop="$refs.grid.doSave(scope.row)" v-if="scope.row.isEdit">
-               </hd-btn>
-             </template>
-           </el-table-column>
- -->
-          <el-table-column width="100px" align="center" label="是否使用" prop="useFlg" sortable :rules="$r(0,0,50)"
-                           input="el-switch" :inputProp='{activeValue:"1", inactiveValue:"0"}' :inputFormat='$ckFt'>
+                 <template slot-scope="scope">
+                   <hd-btn icon="el-icon-edit" hint="编辑" @click.stop="$refs.grid.doEdit(scope.row)"
+                           v-if="!scope.row.isEdit">
+                   </hd-btn>
+                   <hd-btn hint="撤销" @click.stop="$refs.grid.doCancel(scope.row)" v-if="scope.row.isEdit">
+                     <svg-icon icon-class="undo"/>
+                   </hd-btn>
+                   <hd-btn icon="el-icon-check" hint="保存" @click.stop="$refs.grid.doSave(scope.row)" v-if="scope.row.isEdit">
+                   </hd-btn>
+                 </template>
+               </el-table-column>
+     -->
+          <el-table-column
+            width="100px"
+            align="center"
+            label="是否使用"
+            prop="useFlg"
+            sortable
+            :rules="$r(0, 0, 50)"
+            input="el-switch"
+            :inputProp="{ activeValue: '1', inactiveValue: '0' }"
+            :inputFormat="$ckFt"
+          >
           </el-table-column>
 
           <!-- <el-table-column width="100px" align="center" label="表名" prop="tableName" sortable
-                            :rules="$r(1,0,50)" no-edit>
-           </el-table-column>
-           <el-table-column width="100px" align="center" label="字段名" prop="columnName" sortable
-                            :rules="$r(1,0,50)" no-edit>
-           </el-table-column>-->
-          <el-table-column width="100px" align="center" label="字段注解" prop="columnComment"
-                           :rules="$r(1,0,50)">
+                                :rules="$r(1,0,50)" no-edit>
+               </el-table-column>
+               <el-table-column width="100px" align="center" label="字段名" prop="columnName" sortable
+                                :rules="$r(1,0,50)" no-edit>
+               </el-table-column>-->
+          <el-table-column
+            width="100px"
+            align="center"
+            label="字段注解"
+            prop="columnComment"
+            :rules="$r(1, 0, 50)"
+          >
           </el-table-column>
-          <el-table-column width="100px" align="center" label="字段类型" prop="columnType"
-                           :rules="$r(1)" input="HdDrop" :inputProp="{ field:'IDV_COLUMN_TYPE'}"
-                           @change="columnTypeChange">
+          <el-table-column
+            width="100px"
+            align="center"
+            label="字段类型"
+            prop="columnType"
+            :rules="$r(1)"
+            input="HdDrop"
+            :inputProp="{ field: 'IDV_COLUMN_TYPE' }"
+            @change="columnTypeChange"
+          >
           </el-table-column>
-          <el-table-column width="110px" align="center" label="格式/代码" prop="formatter"
-                           :rules="$r(1)">
+          <el-table-column
+            width="110px"
+            align="center"
+            label="格式/代码"
+            prop="formatter"
+            :rules="$r(1)"
+          >
             <template slot-scope="scope">
-                <!--noEdit不允许编辑-->
-                <template v-if="scope.row.isEdit">
-                  <template v-if="scope.row.columnType == 'DROP'">
-                    <sel-grid-fieldcode :gridRow="scope.row" :txtVal.sync="scope.row['formatter']"
-                                        :idVal.sync="scope.row['formatter']" @blur="checkErr(scope.row)"
-                                        style="width: 100%;" v-model="scope.row['formatter']"></sel-grid-fieldcode>
-                  </template>
-                  <template v-else-if="scope.row.columnType == 'NUMBER'">
-                    <HdDrop :gridRow="scope.row" :txtVal.sync="scope.row['formatterStr']"
-                            :idVal.sync="scope.row['formatter']" @blur="checkErr(scope.row)"
-                            style="width: 100%;" field="IDV_NUMBER_FORMATTER"
-                            v-model="scope.row['formatter']"></HdDrop>
-                  </template>
-                  <template v-else-if="scope.row.columnType == 'DATE'">
-                    <HdDrop :gridRow="scope.row" :txtVal.sync="scope.row['formatterStr']"
-                            :idVal.sync="scope.row['formatter']" @blur="checkErr(scope.row)"
-                            style="width: 100%;" field="IDV_DATE_FORMATTER"
-                            v-model="scope.row['formatter']"></HdDrop>
-                  </template>
-                  <template v-else>
-                  </template>
+              <!--noEdit不允许编辑-->
+              <template v-if="scope.row.isEdit">
+                <template v-if="scope.row.columnType == 'DROP'">
+                  <sel-grid-fieldcode
+                    :gridRow="scope.row"
+                    :txtVal.sync="scope.row['formatter']"
+                    :idVal.sync="scope.row['formatter']"
+                    @blur="checkErr(scope.row)"
+                    style="width: 100%"
+                    v-model="scope.row['formatter']"
+                  ></sel-grid-fieldcode>
+                </template>
+                <template v-else-if="scope.row.columnType == 'NUMBER'">
+                  <HdDrop
+                    :gridRow="scope.row"
+                    :txtVal.sync="scope.row['formatterStr']"
+                    :idVal.sync="scope.row['formatter']"
+                    @blur="checkErr(scope.row)"
+                    style="width: 100%"
+                    field="IDV_NUMBER_FORMATTER"
+                    v-model="scope.row['formatter']"
+                  ></HdDrop>
                 </template>
+                <template v-else-if="scope.row.columnType == 'DATE'">
+                  <HdDrop
+                    :gridRow="scope.row"
+                    :txtVal.sync="scope.row['formatterStr']"
+                    :idVal.sync="scope.row['formatter']"
+                    @blur="checkErr(scope.row)"
+                    style="width: 100%"
+                    field="IDV_DATE_FORMATTER"
+                    v-model="scope.row['formatter']"
+                  ></HdDrop>
+                </template>
+                <template v-else> </template>
+              </template>
             </template>
           </el-table-column>
-          <el-table-column width="100px" align="center" label="是否必填" prop="columnRequire"
-                           input="el-switch" :inputProp="{'active-value':1, 'inactive-value':0}" :inputFormat='$ckFt'>
+          <el-table-column
+            width="100px"
+            align="center"
+            label="是否必填"
+            prop="columnRequire"
+            input="el-switch"
+            :inputProp="{ 'active-value': 1, 'inactive-value': 0 }"
+            :inputFormat="$ckFt"
+          >
           </el-table-column>
-          <el-table-column width="100px" align="center" label="最大长度" prop="columnLen"
-                           :rules="$r(1, 0, 255, 'number')" input="HdNum">
+          <el-table-column
+            width="100px"
+            align="center"
+            label="最大长度"
+            prop="columnLen"
+            :rules="$r(1, 0, 255, 'number')"
+            input="HdNum"
+          >
           </el-table-column>
           <!--     <el-table-column width="100px" align="center" label="比例" prop="columnScale" sortable
-                                :rules="$r(0, 'number', 0, 255)" input="HdNum">
-               </el-table-column>
-               <el-table-column width="100px" align="center" label="默认值" prop="columnDefaultValue" sortable
-                                :rules="$r(0,0,50)">
-               </el-table-column>
+                                    :rules="$r(0, 'number', 0, 255)" input="HdNum">
+                   </el-table-column>
+                   <el-table-column width="100px" align="center" label="默认值" prop="columnDefaultValue" sortable
+                                    :rules="$r(0,0,50)">
+                   </el-table-column>
 
-               <el-table-column width="100px" align="center" label="编码" prop="gridCode" sortable :rules="$r(1,0,50)" no-edit>
-               </el-table-column>-->
-          <el-table-column width="100px" align="center" label="表格宽度" prop="formSpan"
-                           :rules="$r(1)" input="HdDrop" :inputProp="{field:'IDV_FORM_SPAN'}"
+                   <el-table-column width="100px" align="center" label="编码" prop="gridCode" sortable :rules="$r(1,0,50)" no-edit>
+                   </el-table-column>-->
+          <el-table-column
+            width="100px"
+            align="center"
+            label="表格宽度"
+            prop="formSpan"
+            :rules="$r(1)"
+            input="HdDrop"
+            :inputProp="{ field: 'IDV_FORM_SPAN' }"
           >
           </el-table-column>
           <!--          <el-table-column width="100px" align="center" label="表单高度" prop="formXs" sortable
-                                     :rules="$r(1, 'number', 0, 1024)" input="HdNum">
-                    </el-table-column>-->
-   <!--       <el-table-column width="100px" align="center" label="列表宽度" prop="gridWidth"
-                           :rules="$r(0, 0, 9999, 'number')" input="HdNum">
-          </el-table-column>-->
+                                         :rules="$r(1, 'number', 0, 1024)" input="HdNum">
+                        </el-table-column>-->
+          <!--       <el-table-column width="100px" align="center" label="列表宽度" prop="gridWidth"
+                               :rules="$r(0, 0, 9999, 'number')" input="HdNum">
+              </el-table-column>-->
           <!-- <el-table-column width="100px" align="center" label="默认值" prop="defaultValue" sortable :rules="$r(0,0,50)">
-           </el-table-column>
-           <el-table-column width="100px" align="center" label="描述" prop="placeHolder" sortable :rules="$r(0,0,50)">
-           </el-table-column>
-           <el-table-column width="100px" align="center" label="规则" prop="rules" sortable :rules="$r(1,0,50)">
-           </el-table-column>-->
+               </el-table-column>
+               <el-table-column width="100px" align="center" label="描述" prop="placeHolder" sortable :rules="$r(0,0,50)">
+               </el-table-column>
+               <el-table-column width="100px" align="center" label="规则" prop="rules" sortable :rules="$r(1,0,50)">
+               </el-table-column>-->
           <el-table-column align="center" label="排序" width="80px" noQuery>
             <template slot-scope="scope">
-              <svg-icon class='drag-handler' icon-class="drag"></svg-icon>
+              <svg-icon class="drag-handler" icon-class="drag"></svg-icon>
             </template>
           </el-table-column>
         </hd-com-grid>
@@ -117,165 +192,184 @@
     </el-container>
     <div slot="footer" class="dialog-footer">
       <!--    <el-button class="filter-item" type="primary" @click="doAdd()" icon="edit" ref="a"
-                     keyType="add">新增
-          </el-button>-->
-      <el-button @click="visible = false">{{$t('取 消')}}</el-button>
-      <el-button type="primary" @click="submit" :loading="loading"> {{$t('确 定')}}</el-button>
+                         keyType="add">新增
+              </el-button>-->
+      <el-button @click="visible = false">{{ $t('取 消') }}</el-button>
+      <el-button type="primary" @click="submit" :loading="loading">
+        {{ $t('确 定') }}</el-button
+      >
     </div>
   </el-dialog>
 </template>
-<script>
-    import Sortable from 'sortablejs'
-    import SelGridFieldcode from "./HdSel/SelGridFieldcod";
-
-    export default {
-        name: 'gridexfield',
-        components: {SelGridFieldcode},
-        props: {
-            table: String,
-            columnList: Array,
-            gridCode: String
-        },
-        data() {
-            return {
-                hdQuery: new HdQuery(this),
-                visible: false,
-                loading: false,
-                list: [],
-            }
-        },
-        mounted() {
-            this.init();
-        },
-        methods: {
-            init(exField) {
-                this.hdQuery.query.tableName = this.table;
-                this.hdQuery.query.columnList = this.columnList;
-                this.hdQuery.query.gridCode = this.gridCode;
-                this.hdQuery.sort = 'sortNo';
-                this.hdQuery.order = 'asc';
 
-                this.$http.post('/webresources/login/tech/ComExFieldCustom/find', this.hdQuery).then(response => {
-                    this.list = response.data.rows;
+<script>
+import Sortable from 'sortablejs'
+import SelGridFieldcode from './HdSel/SelGridFieldcod'
 
-                    if(this.columnList) {
-                        this.columnList.forEach(column => {
-                            if (!response.data.rows.some(row => {
-                                return row.columnName == column
-                            })) {
-                                this.list.unshift({
-                                    columnName: column,
-                                    tableName: this.table,
-                                    formXs: '20',
-                                    formSpan: '12',
-                                    isEdit: true
-                                })
-                            }
-                        })
-                    }
+export default {
+  name: 'gridexfield',
+  components: { SelGridFieldcode },
+  props: {
+    table: String,
+    columnList: Array,
+    gridCode: String,
+  },
+  data() {
+    return {
+      hdQuery: new HdQuery(this),
+      visible: false,
+      loading: false,
+      list: [],
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init(exField) {
+      this.hdQuery.query.tableName = this.table
+      this.hdQuery.query.columnList = this.columnList
+      this.hdQuery.query.gridCode = this.gridCode
+      this.hdQuery.sort = 'sortNo'
+      this.hdQuery.order = 'asc'
 
-                    let i = 0;
-                    this.list.forEach(row => {
-                        row.isEdit = true;
-                        row.sortNo = i++
-                        row.formSpan = row.formSpan + "";
-                    });
-                    this.$refs.grid.doQuery({rows: this.list})
+      this.$http
+        .post('/webresources/login/tech/ComExFieldCustom/find', this.hdQuery)
+        .then((response) => {
+          this.list = response.data.rows
 
-                    this.$nextTick(() => {
-                        this.setSort()
-                    })
+          if (this.columnList) {
+            this.columnList.forEach((column) => {
+              if (
+                !response.data.rows.some((row) => {
+                  return row.columnName == column
                 })
+              ) {
+                this.list.unshift({
+                  columnName: column,
+                  tableName: this.table,
+                  formXs: '20',
+                  formSpan: '12',
+                  isEdit: true,
+                })
+              }
+            })
+          }
 
-            },
-            show() {
-                this.visible = true
+          let i = 0
+          this.list.forEach((row) => {
+            row.isEdit = true
+            row.sortNo = i++
+            row.formSpan = row.formSpan + ''
+          })
+          this.$refs.grid.doQuery({ rows: this.list })
 
-                this.list.forEach(row => {
-                    row.isEdit = true;
-                });
-            },
-            setSort() {
-                const elAll = document.querySelectorAll('.gridShow .el-table__body-wrapper > table > tbody')
-                for (let i = 0; i < elAll.length; i++) {
-                    const el = elAll[i]
-                    this.sortable = Sortable.create(el, {
-                        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
-                        onEnd: evt => {
-                            // this.list.forEach(row => console.log(row.columnComment, row.sortNo))
-                            // console.log('----------------------------------')
-                            // console.log(evt)
-                            // console.log('----------------------------------')
+          this.$nextTick(() => {
+            this.setSort()
+          })
+        })
+    },
+    show() {
+      this.visible = true
 
-                            this.list.forEach(row => {
-                                if (row.sortNo == evt.oldIndex) {
-                                    row.sortNo = evt.newIndex
-                                } else if (evt.newIndex > evt.oldIndex && row.sortNo <= evt.newIndex && row.sortNo > evt.oldIndex) {
-                                    row.sortNo = row.sortNo - 1
-                                } else if (evt.newIndex < evt.oldIndex && row.sortNo >= evt.newIndex && row.sortNo < evt.oldIndex) {
-                                    row.sortNo = row.sortNo + 1
-                                }
-                            })
+      this.list.forEach((row) => {
+        row.isEdit = true
+      })
+    },
+    setSort() {
+      const elAll = document.querySelectorAll(
+        '.gridShow .el-table__body-wrapper > table > tbody'
+      )
+      for (let i = 0; i < elAll.length; i++) {
+        const el = elAll[i]
+        this.sortable = Sortable.create(el, {
+          ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
+          onEnd: (evt) => {
+            // this.list.forEach(row => console.log(row.columnComment, row.sortNo))
+            // console.log('----------------------------------')
+            // console.log(evt)
+            // console.log('----------------------------------')
 
-                            // this.list.forEach(row => console.log(row.columnComment, row.sortNo))
-                        }
-                    })
-                }
-            },
-            doAdd() {
-                let emptyColumn = this.getEmptyColumn();
-                if (emptyColumn == null) {
-                    this.$message({
-                        message: "没有剩余的扩展字段"
-                    })
-                    return;
-                }
-                let exField = {
-                    gridCode: this.gridCode,
-                    tableName: this.table,
-                    columnName: emptyColumn,
-                    formXs: 12,
-                    formSpan: '20',
-                    isEdit: true
-                }
-                this.$refs.grid.doEdit('', exField)
-            },
-            submit() {
-                this.list.forEach(row => {
-                    if (!row.columnComment || !row.columnType) {
-                        row.isEdit = false;
-                    }
-                    row.gridCode = this.gridCode;
-                });
+            this.list.forEach((row) => {
+              if (row.sortNo == evt.oldIndex) {
+                row.sortNo = evt.newIndex
+              } else if (
+                evt.newIndex > evt.oldIndex &&
+                row.sortNo <= evt.newIndex &&
+                row.sortNo > evt.oldIndex
+              ) {
+                row.sortNo = row.sortNo - 1
+              } else if (
+                evt.newIndex < evt.oldIndex &&
+                row.sortNo >= evt.newIndex &&
+                row.sortNo < evt.oldIndex
+              ) {
+                row.sortNo = row.sortNo + 1
+              }
+            })
 
-                this.$refs.grid.doSaveAll().then(v => {
-                    this.visible = false;
-                    this.$emit('save-ok')
-                }).catch(e => {
-                    this.$message({
-                        message: "填写有误"
-                    })
-                });
-            },
-            getEmptyColumn() {
-                let emptyColumns = this.columnList.filter(column => {
-                    return !this.list.some(row => {
-                        return row.columnName == column;
-                    })
-                })
-                return emptyColumns.length > 0 ? emptyColumns[0] : null;
-            },
-            columnTypeChange(v, row) {
-                if (row.exColumnId) {
-                    this.$message({type: 'warning', message: this.$t('修改类型可能回造成数据混乱或丢失， 请慎重！')});
-                }
-                if(row.columnType == 'VARCHAR' || row.columnType == 'BOOLEAN') {
-                    row.formatter = 'x';
-                }
-            },
+            // this.list.forEach(row => console.log(row.columnComment, row.sortNo))
+          },
+        })
+      }
+    },
+    doAdd() {
+      let emptyColumn = this.getEmptyColumn()
+      if (emptyColumn == null) {
+        this.$message({
+          message: '没有剩余的扩展字段',
+        })
+        return
+      }
+      let exField = {
+        gridCode: this.gridCode,
+        tableName: this.table,
+        columnName: emptyColumn,
+        formXs: 12,
+        formSpan: '20',
+        isEdit: true,
+      }
+      this.$refs.grid.doEdit('', exField)
+    },
+    submit() {
+      this.list.forEach((row) => {
+        if (!row.columnComment || !row.columnType) {
+          row.isEdit = false
         }
-    }
-</script>
+        row.gridCode = this.gridCode
+      })
 
-<style scoped>
-</style>
+      this.$refs.grid
+        .doSaveAll()
+        .then((v) => {
+          this.visible = false
+          this.$emit('save-ok')
+        })
+        .catch((e) => {
+          this.$message({
+            message: '填写有误',
+          })
+        })
+    },
+    getEmptyColumn() {
+      let emptyColumns = this.columnList.filter((column) => {
+        return !this.list.some((row) => {
+          return row.columnName == column
+        })
+      })
+      return emptyColumns.length > 0 ? emptyColumns[0] : null
+    },
+    columnTypeChange(v, row) {
+      if (row.exColumnId) {
+        this.$message({
+          type: 'warning',
+          message: this.$t('修改类型可能回造成数据混乱或丢失， 请慎重！'),
+        })
+      }
+      if (row.columnType == 'VARCHAR' || row.columnType == 'BOOLEAN') {
+        row.formatter = 'x'
+      }
+    },
+  },
+}
+</script>