hd-idevvue3 3.0.2 → 3.0.4

package/src/demo/hightquery.vue

@@ -1,128 +1,326 @@
 <template>
-  <el-container style="height: 100%; ">
+  <el-container style="height: 100%">
     <el-aside width="50%" title="货名">
-      <hd-com-grid :hdQuery="hdQuery" ref="gridleft" url="/webresources/login/code/SbcCargo" @row-click="doClickQuery">
+      <hd-com-grid
+        :hdQuery="hdQuery"
+        ref="gridleft"
+        url="/webresources/login/code/SbcCargo"
+        @row-click="doClickQuery"
+      >
         <div class="filter-container" slot="query">
-          <el-input @keyup.enter.native="doQuery" suffix-icon="el-icon-search" style="width: 200px;float:right;"
-                    class="filter-item" placeholder="代码、名称" v-model="hdQuery.query.anyQuery">
+          <el-input
+            @keyup.enter.native="doQuery"
+            :suffix-icon="ElIconSearch"
+            style="width: 200px; float: right"
+            class="filter-item"
+            placeholder="代码、名称"
+            v-model="hdQuery.query.anyQuery"
+          >
           </el-input>
-          <el-button class="filter-item" @click="$refs.gridleft.doEdit('')" type="primary" keyType="add">新增
+          <el-button
+            class="filter-item"
+            @click="$refs.gridleft.doEdit('')"
+            type="primary"
+            keyType="add"
+            >新增
           </el-button>
-          <el-button class="filter-item" @click="$refs.gridleft.doRemoveAll()" type="danger" keyType="del">删除
+          <el-button
+            class="filter-item"
+            @click="$refs.gridleft.doRemoveAll()"
+            type="danger"
+            keyType="del"
+            >删除
           </el-button>
-          <tlifend :ifend.sync="hdQuery.query.ifendFlag" @ifendFlag="doQuery"></tlifend>
+          <tlifend
+            :ifend.sync="hdQuery.query.ifendFlag"
+            @ifendFlag="doQuery"
+          ></tlifend>
         </div>
         <el-table-column width="60px" align="center" label="操作" fixed="right">
           <!--<template slot-scope="scope">
-            <hd-btn icon="el-icon-edit" hint="编辑" @click="doEdit(scope.row.scargoId)"></hd-btn>
-            <hd-btn icon="el-icon-delete" hint="删除" @click="$refs.gridleft.doRemove(scope.row)"></hd-btn>
-          </template>-->
+                <hd-btn icon="el-icon-edit" hint="编辑" @click="doEdit(scope.row.scargoId)"></hd-btn>
+                <hd-btn icon="el-icon-delete" hint="删除" @click="$refs.gridleft.doRemove(scope.row)"></hd-btn>
+              </template>-->
           <template slot-scope="scope">
-            <hd-btn icon="el-icon-edit" hint="编辑" @click.stop="$refs.gridleft.doEdit(scope.row)"
-                    v-if="!scope.row.isEdit">编辑
+            <hd-btn
+              icon="el-icon-edit"
+              hint="编辑"
+              @click.stop="$refs.gridleft.doEdit(scope.row)"
+              v-if="!scope.row.isEdit"
+              >编辑
             </hd-btn>
-            <hd-btn icon="el-icon-check" hint="保存" @click.stop="doSave(scope.row)" v-if="scope.row.isEdit">保存</hd-btn>
-            <hd-btn hint="撤销" @click.stop="$refs.gridleft.doCancel(scope.row,scope.$index)" v-if="scope.row.isEdit">
-              <svg-icon icon-class="undo"/>
+            <hd-btn
+              icon="el-icon-check"
+              hint="保存"
+              @click.stop="doSave(scope.row)"
+              v-if="scope.row.isEdit"
+              >保存</hd-btn
+            >
+            <hd-btn
+              hint="撤销"
+              @click.stop="$refs.gridleft.doCancel(scope.row, scope.$index)"
+              v-if="scope.row.isEdit"
+            >
+              <svg-icon icon-class="undo" />
             </hd-btn>
-            <hd-btn icon="el-icon-delete" hint="删除" @click.stop="$refs.gridleft.doRemove(scope.row)"
-                    v-if="!scope.row.isEdit">删除
+            <hd-btn
+              icon="el-icon-delete"
+              hint="删除"
+              @click.stop="$refs.gridleft.doRemove(scope.row)"
+              v-if="!scope.row.isEdit"
+              >删除
             </hd-btn>
           </template>
         </el-table-column>
-        <el-table-column width="50px" header-align="center" align="center" label="状态">
+        <el-table-column
+          width="50px"
+          header-align="center"
+          align="center"
+          label="状态"
+        >
           <template slot-scope="scope">
             <span>
-              <i v-if="scope.row.ifendFlag =='1'" class="fa fa-eercast" style="color: red;"></i>
-               <i v-else="scope.row.ifendFlag =='0'" class="fa fa-eercast" style="color: black;"></i>
+              <i
+                v-if="scope.row.ifendFlag == '1'"
+                class="fa fa-eercast"
+                style="color: red"
+              ></i>
+              <i
+                v-else="scope.row.ifendFlag == '0'"
+                class="fa fa-eercast"
+                style="color: black"
+              ></i>
             </span>
           </template>
         </el-table-column>
-        <el-table-column width="100px" align="left" header-align="center" label="代码" prop="cargoCode" sortable
-                         :rules="$r(1,0,20)"></el-table-column>
-        <el-table-column width="200px" align="left" header-align="center" label="简称" prop="cargoShort" sortable
-                         :rules="$r(1,0,50)"></el-table-column>
-        <el-table-column width="100px" align="left" header-align="center" label="货类" prop="cargoKindCode"
-                         :input="require('@/views/comgctos/sel_sbccargokind').default" txtVal="cargoKindName"
-                         :inputProp='{kindSetCod:"CN"}' idVal="cargoKindCode"></el-table-column>
-        <el-table-column width="200px" align="left" header-align="center" label="货名称" prop="cargoName" sortable
-                         :rules="$r(1,0,50)"></el-table-column>
-        <el-table-column width="130px" align="left" header-align="center" label="英文名称" prop="enCargoName" sortable
-                         :rules="$r(1,0,50)"></el-table-column>
-        <el-table-column width="100px" align="left" header-align="center" label="汉字提示" prop="hzts" sortable
-                         noEdit></el-table-column>
-        <el-table-column width="100px" align="left" header-align="center" label="备注" prop="description" sortable
-                         :rules="$r('',0,255)"></el-table-column>
-        <el-table-column align="center" label="全局" prop="sysFlag" input="el-switch"
-                         :inputProp='{activeValue:"1", inactiveValue:"0"}' :inputFormat='$ckFt'></el-table-column>
-        <el-table-column align="center" label="作废" prop="ifendFlag" input="el-switch"
-                         :inputProp='{activeValue:"1", inactiveValue:"0"}' :inputFormat='$ckFt'></el-table-column>
+        <el-table-column
+          width="100px"
+          align="left"
+          header-align="center"
+          label="代码"
+          prop="cargoCode"
+          sortable
+          :rules="$r(1, 0, 20)"
+        ></el-table-column>
+        <el-table-column
+          width="200px"
+          align="left"
+          header-align="center"
+          label="简称"
+          prop="cargoShort"
+          sortable
+          :rules="$r(1, 0, 50)"
+        ></el-table-column>
+        <el-table-column
+          width="100px"
+          align="left"
+          header-align="center"
+          label="货类"
+          prop="cargoKindCode"
+          :input="require('@/views/comgctos/sel_sbccargokind').default"
+          txtVal="cargoKindName"
+          :inputProp="{ kindSetCod: 'CN' }"
+          idVal="cargoKindCode"
+        ></el-table-column>
+        <el-table-column
+          width="200px"
+          align="left"
+          header-align="center"
+          label="货名称"
+          prop="cargoName"
+          sortable
+          :rules="$r(1, 0, 50)"
+        ></el-table-column>
+        <el-table-column
+          width="130px"
+          align="left"
+          header-align="center"
+          label="英文名称"
+          prop="enCargoName"
+          sortable
+          :rules="$r(1, 0, 50)"
+        ></el-table-column>
+        <el-table-column
+          width="100px"
+          align="left"
+          header-align="center"
+          label="汉字提示"
+          prop="hzts"
+          sortable
+          noEdit
+        ></el-table-column>
+        <el-table-column
+          width="100px"
+          align="left"
+          header-align="center"
+          label="备注"
+          prop="description"
+          sortable
+          :rules="$r('', 0, 255)"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="全局"
+          prop="sysFlag"
+          input="el-switch"
+          :inputProp="{ activeValue: '1', inactiveValue: '0' }"
+          :inputFormat="$ckFt"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="作废"
+          prop="ifendFlag"
+          input="el-switch"
+          :inputProp="{ activeValue: '1', inactiveValue: '0' }"
+          :inputFormat="$ckFt"
+        ></el-table-column>
       </hd-com-grid>
     </el-aside>
     <el-main title="规格">
-      <hd-com-grid :hdQuery="formathdQuery" ref="gridright" url="/webresources/login/code/SbcCargoFormat" notInit>
+      <hd-com-grid
+        :hdQuery="formathdQuery"
+        ref="gridright"
+        url="/webresources/login/code/SbcCargoFormat"
+        notInit
+      >
         <div class="filter-container" slot="query">
-          <el-button class="filter-item" @click="formatEdit('')" type="primary" keyType="add">新增</el-button>
-          <el-button class="filter-item" @click="$refs.gridright.doRemoveAll()" type="danger" keyType="del">删除
+          <el-button
+            class="filter-item"
+            @click="formatEdit('')"
+            type="primary"
+            keyType="add"
+            >新增</el-button
+          >
+          <el-button
+            class="filter-item"
+            @click="$refs.gridright.doRemoveAll()"
+            type="danger"
+            keyType="del"
+            >删除
           </el-button>
-          <tlifend :ifend.sync="formathdQuery.query.ifendFlag" @ifendFlag="formatQuery"></tlifend>
+          <tlifend
+            :ifend.sync="formathdQuery.query.ifendFlag"
+            @ifendFlag="formatQuery"
+          ></tlifend>
         </div>
         <el-table-column align="center" label="操作" fixed="right">
           <template slot-scope="scope">
-            <hd-btn icon="el-icon-edit" hint="编辑" @click="formatEdit(scope.row)" v-if="!scope.row.isEdit">编辑</hd-btn>
-            <hd-btn icon="el-icon-check" hint="保存" @click="$refs.gridright.doSave(scope.row)" v-if="scope.row.isEdit">
+            <hd-btn
+              icon="el-icon-edit"
+              hint="编辑"
+              @click="formatEdit(scope.row)"
+              v-if="!scope.row.isEdit"
+              >编辑</hd-btn
+            >
+            <hd-btn
+              icon="el-icon-check"
+              hint="保存"
+              @click="$refs.gridright.doSave(scope.row)"
+              v-if="scope.row.isEdit"
+            >
               保存
             </hd-btn>
-            <hd-btn icon="el-icon-delete" hint="删除" @click="$refs.gridright.doRemove(scope.row)"
-                    v-if="!scope.row.isEdit"></hd-btn>
-            <hd-btn hint="撤销" @click.stop="$refs.gridright.doCancel(scope.row,scope.$index)" v-if="scope.row.isEdit">
-              <svg-icon icon-class="undo"/>
+            <hd-btn
+              icon="el-icon-delete"
+              hint="删除"
+              @click="$refs.gridright.doRemove(scope.row)"
+              v-if="!scope.row.isEdit"
+            ></hd-btn>
+            <hd-btn
+              hint="撤销"
+              @click.stop="$refs.gridright.doCancel(scope.row, scope.$index)"
+              v-if="scope.row.isEdit"
+            >
+              <svg-icon icon-class="undo" />
             </hd-btn>
           </template>
         </el-table-column>
-        <el-table-column width="50px" header-align="center" align="center" label="状态">
+        <el-table-column
+          width="50px"
+          header-align="center"
+          align="center"
+          label="状态"
+        >
           <template slot-scope="scope">
             <span>
-              <i v-if="scope.row.ifendFlag =='1'" class="fa fa-eercast" style="color: red;"></i>
-               <i v-else="scope.row.ifendFlag =='0'" class="fa fa-eercast" style="color: black;"></i>
+              <i
+                v-if="scope.row.ifendFlag == '1'"
+                class="fa fa-eercast"
+                style="color: red"
+              ></i>
+              <i
+                v-else="scope.row.ifendFlag == '0'"
+                class="fa fa-eercast"
+                style="color: black"
+              ></i>
             </span>
           </template>
         </el-table-column>
-        <el-table-column width="100px" align="left" header-align="center" label="规格" prop="format" sortable
-                         :rules="$r(1,0,20)"></el-table-column>
-        <el-table-column width="100px" align="left" header-align="center" label="备注" prop="description" sortable
-                         :rules="$r('',0,255)"></el-table-column>
+        <el-table-column
+          width="100px"
+          align="left"
+          header-align="center"
+          label="规格"
+          prop="format"
+          sortable
+          :rules="$r(1, 0, 20)"
+        ></el-table-column>
+        <el-table-column
+          width="100px"
+          align="left"
+          header-align="center"
+          label="备注"
+          prop="description"
+          sortable
+          :rules="$r('', 0, 255)"
+        ></el-table-column>
         <!-- <el-table-column width="100px" align="left" header-align="center" label="汉字提示" prop="hzts" sortable noEdit></el-table-column>-->
-        <el-table-column align="center" label="全局" prop="sysFlag" input="el-switch"
-                         :inputProp='{activeValue:"1", inactiveValue:"0"}' :inputFormat='$ckFt'></el-table-column>
-        <el-table-column align="center" label="作废" prop="ifendFlag" input="el-switch"
-                         :inputProp='{activeValue:"1", inactiveValue:"0"}' :inputFormat='$ckFt'></el-table-column>
+        <el-table-column
+          align="center"
+          label="全局"
+          prop="sysFlag"
+          input="el-switch"
+          :inputProp="{ activeValue: '1', inactiveValue: '0' }"
+          :inputFormat="$ckFt"
+        ></el-table-column>
+        <el-table-column
+          align="center"
+          label="作废"
+          prop="ifendFlag"
+          input="el-switch"
+          :inputProp="{ activeValue: '1', inactiveValue: '0' }"
+          :inputFormat="$ckFt"
+        ></el-table-column>
       </hd-com-grid>
     </el-main>
     <sbccargoform ref="sbccargoform" @save-ok="doQuery"></sbccargoform>
   </el-container>
 </template>
+
 <script>
+import { Search as ElIconSearch } from '@element-plus/icons'
 import sbccargoform from './sbccargoform'
 import selsbccargokind from '@/views/comgctos/sel_sbccargokind'
 import tlifend from '@/views/comgctos/showTl/tl_ifend'
 
 export default {
-  components: { sbccargoform, tlifend, selsbccargokind },
   data() {
     return {
       hdQuery: new HdQuery(this),
       formathdQuery: new HdQuery(this, 'formatQuery'),
-      scargoId: ''
+      scargoId: '',
+      ElIconSearch,
     }
   },
+  components: { sbccargoform, tlifend, selsbccargokind },
   methods: {
     doQuery() {
       // 显示loading框
       this.scargoId = ''
       this.$refs['gridleft'].doQuery()
     },
-    doEdit(scargoId) { // 增加或编辑
+    doEdit(scargoId) {
+      // 增加或编辑
       this.$refs['sbccargoform'].show(scargoId)
     },
     doRemove(row) {
@@ -162,8 +360,7 @@ export default {
       }
       this.formathdQuery.query.scargoId = this.scargoId
       this.$refs.gridright.doEdit(row)
-    }
-  }
+    },
+  },
 }
 </script>
-

package/src/demo/inlineedit.vue

@@ -1,23 +1,49 @@
-<!--行内编辑与普通列表,写法应该只差有没有rules校验,el-table-column 列内容尽可能不要写template,下拉和自定义组件 prop='code值'
-inputFormat 写code对应的文字 :input写组件 inputProp组件属性,这样在高级查询时和导出excel时    会自动实现 -->
 <template>
   <el-container>
     <el-main>
-      <hd-com-grid ref="grid" :hdQuery="hdQuery" url="/webresources/login/privilege/SysCode/vue"
-                   noCopy="codeId">
+      <hd-com-grid
+        ref="grid"
+        :hdQuery="hdQuery"
+        url="/webresources/login/privilege/SysCode/vue"
+        noCopy="codeId"
+      >
         <div class="filter-container" slot="query">
-          <el-input @keyup.enter.native="$refs.grid.doQuery()" suffix-icon="el-icon-search"
-                    style="width: 200px;float:right;"
-                    class="filter-item" placeholder="名称、代码"
-                    v-model="hdQuery.query.anyQuery">
+          <el-input
+            @keyup.enter.native="$refs.grid.doQuery()"
+            :suffix-icon="ElIconSearch"
+            style="width: 200px; float: right"
+            class="filter-item"
+            placeholder="名称、代码"
+            v-model="hdQuery.query.anyQuery"
+          >
           </el-input>
-          <el-button class="filter-item" @click="doAdd" 　type="primary" keyType="add">新增
+          <el-button
+            class="filter-item"
+            @click="doAdd"
+            　type="primary"
+            keyType="add"
+            >新增
           </el-button>
-          <el-button class="filter-item" @click="$refs.grid.doCopy()" type="primary" keyType="copy">复制
+          <el-button
+            class="filter-item"
+            @click="$refs.grid.doCopy()"
+            type="primary"
+            keyType="copy"
+            >复制
           </el-button>
-          <el-button class="filter-item" @click="$refs.grid.doRemoveAll()" type="danger" keyType="del">删除
+          <el-button
+            class="filter-item"
+            @click="$refs.grid.doRemoveAll()"
+            type="danger"
+            keyType="del"
+            >删除
           </el-button>
-          <el-button class="filter-item" @click="$refs.grid.doSaveAll()" type="danger" keyType="save">保存
+          <el-button
+            class="filter-item"
+            @click="$refs.grid.doSaveAll()"
+            type="danger"
+            keyType="save"
+            >保存
           </el-button>
         </div>
         <el-table-column width="60px" align="center" label="操作" fixed="right">
@@ -25,41 +51,108 @@ inputFormat 写code对应的文字 :input写组件 inputProp组件属性,这样
             <HdGridEditBtn :row="scope.row" gridRef="grid"></HdGridEditBtn>
           </template>
         </el-table-column>
-        <el-table-column width="120px" align="left" header-align="center" label="代码" prop="code" sortable
-                         :rules="$r(1,0,36)">
+        <el-table-column
+          width="120px"
+          align="left"
+          header-align="center"
+          label="代码"
+          prop="code"
+          sortable
+          :rules="$r(1, 0, 36)"
+        >
         </el-table-column>
-        <el-table-column width="120px" align="left" header-align="center" label="名称" prop="name" sortable
-                         :rules="$r(1,0,50)">
+        <el-table-column
+          width="120px"
+          align="left"
+          header-align="center"
+          label="名称"
+          prop="name"
+          sortable
+          :rules="$r(1, 0, 50)"
+        >
         </el-table-column>
-        <el-table-column width="120px" align="left" header-align="center" label="英文名" prop="enName" sortable>
+        <el-table-column
+          width="120px"
+          align="left"
+          header-align="center"
+          label="英文名"
+          prop="enName"
+          sortable
+        >
         </el-table-column>
-        <el-table-column align="left" header-align="center" label="排序号" prop="sorter" sortable input="HdNum"
-                         :rules="$r(0,0,100000,'number')">
+        <el-table-column
+          align="left"
+          header-align="center"
+          label="排序号"
+          prop="sorter"
+          sortable
+          input="HdNum"
+          :rules="$r(0, 0, 100000, 'number')"
+        >
         </el-table-column>
-        <el-table-column align="center" label="系统" prop="sysMark" sortable input="el-switch"
-                         :inputProp='{activeValue:"1", inactiveValue:"0"}' :inputFormat='$ckFt'>
+        <el-table-column
+          align="center"
+          label="系统"
+          prop="sysMark"
+          sortable
+          input="el-switch"
+          :inputProp="{ activeValue: '1', inactiveValue: '0' }"
+          :inputFormat="$ckFt"
+        >
         </el-table-column>
-        <el-table-column align="center" label="废弃" prop="abandonedMark" sortable input="el-switch"
-                         :inputProp='{activeValue:"1", inactiveValue:"0"}' :inputFormat='$ckFt'>
+        <el-table-column
+          align="center"
+          label="废弃"
+          prop="abandonedMark"
+          sortable
+          input="el-switch"
+          :inputProp="{ activeValue: '1', inactiveValue: '0' }"
+          :inputFormat="$ckFt"
+        >
         </el-table-column>
-        <el-table-column width="150px" align="left" header-align="center" label="备注/描述" prop="description" sortable>
+        <el-table-column
+          width="150px"
+          align="left"
+          header-align="center"
+          label="备注/描述"
+          prop="description"
+          sortable
+        >
         </el-table-column>
-        <el-table-column width="100px" align="left" header-align="center" label="货类" prop="cargoKindCode"
-                         :input="require('@/views/comgctos/sel_sbccargokind').default" txtVal="cargoKindName"
-                         :inputProp='{kindSetCod:"CN"}' idVal="cargoKindCode"></el-table-column>
+        <el-table-column
+          width="100px"
+          align="left"
+          header-align="center"
+          label="货类"
+          prop="cargoKindCode"
+          :input="require('@/views/comgctos/sel_sbccargokind').default"
+          txtVal="cargoKindName"
+          :inputProp="{ kindSetCod: 'CN' }"
+          idVal="cargoKindCode"
+        ></el-table-column>
         <!--syscode下拉-->
-        <el-table-column width="100px" align="left" header-align="center" label="作业模式" prop="operationMode" sortable
-                         input="HdDrop" :inputProp="{ field:'OPERATION_MODE'}"></el-table-column>
+        <el-table-column
+          width="100px"
+          align="left"
+          header-align="center"
+          label="作业模式"
+          prop="operationMode"
+          sortable
+          input="HdDrop"
+          :inputProp="{ field: 'OPERATION_MODE' }"
+        ></el-table-column>
       </hd-com-grid>
     </el-main>
   </el-container>
 </template>
-<script>
 
+<script>
+import { Search as ElIconSearch } from '@element-plus/icons'
 export default {
   data() {
     return {
-      hdQuery: new HdQuery(this)
+      hdQuery: new HdQuery(this),
+      ElIconSearch,
     }
   },
   // mounted() {//页面加载后执行
@@ -75,14 +168,15 @@ export default {
       if (!this.hdQuery.query.fieldCod) {
         this.$message({
           type: 'error',
-          message: '未选择数据'
+          message: '未选择数据',
         })
         return false
       }
       this.$refs.grid.doEdit('')
-    }
+    },
+  },
+  computed: {
+    // 给外层v-model赋值
   },
-  computed: {// 给外层v-model赋值
-  }
 }
 </script>