hd-idevvue3 3.0.0 → 3.0.2

package/src/hdcom/HdForm.vue

@@ -0,0 +1,278 @@
+<template>
+  <div style="height: 100%;">
+    <el-form v-bind="$attrs" v-on="$listeners" ref="hdform">
+      <slot>
+      </slot>
+      <extend-form v-if="exFieldCode" :gridCode="exFieldCode" :hdformThis="()=>$refs.hdform"></extend-form>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import ExtendForm from "./ExtendForm";
+
+  /**
+   * 实现上一条下一条翻页等整合的form 使用参照AuthOrgnForm.vue
+   * @module HdForm
+   */
+  export default {
+    name: 'HdForm',
+    components: {ExtendForm},
+    inheritAttrs: false,
+    data() {
+      return {
+        tsLoading: false,
+        loading: false,
+        hdResult: {},
+        index: -1, // 当前位置
+        formThis: {}, // 外层form
+        gridThis: {hdQuery: {}, hdResult: {rows: []}},// hdcomgrid对应的列表
+      }
+    },
+    /**
+     * Props
+     * @prop {String} findoneUrl 单值查询的url,与hdcomgrid的一致,非标准格式需要写
+     * @prop {String} saveoneUrl form的ref
+     * @prop {String} removeUrl form的ref
+     * @prop {Array} 或String,noCopy 复制时,不拷贝的,主键必然要加
+     * @prop {Boolean} readForm 是否只显示关闭按钮 默认为false
+     */
+    props: {
+      findoneUrl: String,
+      saveoneUrl: String,
+      removeUrl: String,
+      noCopy: [Array, String], // 不拷贝的主键,请确保第一位是主键  //:noCopy="['codeId']"或者noCopy="codeId"
+      readForm: {type: Boolean, default: false},
+      exFieldCode: String,
+      customeChooseUpdateFn: {
+        type: Function,
+        default: null,
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      show: function (row, gridThis, customeChooseUpdateFn) {
+        this.$nextTick(() => {
+          this.gridThis = gridThis || this.gridThis;
+          this.choose(row)
+          if (row) {
+            for (let i = 0; i < this.gridThis.hdResult.rows.length; i++) { // 给index赋初值
+              if (row == this.gridThis.hdResult.rows[i]) {
+                this.index = i
+                this.gridThis.$refs.hdgrid.setCurrentRow(this.index)
+              }
+            }
+          }
+        })
+      },
+      choose: function (row) { // row为''是增加
+        // 弹窗重复使用时,清除校验项目
+        if (row) { // 列表的数据
+          if (this.customeChooseUpdateFn && this.customeChooseUpdateFn instanceof Function) {
+            this.customeChooseUpdateFn(row);
+            return true
+          } else {
+            const newRow = Object.assign({}, row)
+            newRow._oldRow = row
+            this.$emit('update:model', newRow)// 不能影响列表
+            return true
+          }
+        }
+        this.$http.post(this.findoneUrl ? this.findoneUrl : this.gridThis.findoneUrl, this.gridThis.hdQuery).then(response => { // 增加的
+          const data = response.data
+          data._isAdd = true// 新增标志
+          this.$emit('update:model', data)
+          this.$nextTick(() => {
+            if (this.$refs.hdform) {
+              this.$refs.hdform.clearValidate()
+            }
+          })
+        })
+        //        for (let index = 0; index < this.hdQuery.rows; index++) {
+        //          let tempId = eval("this.hdResult.rows[index]." + this.hdParam.idName);
+        //          if (tempId === id) {
+        //            this.index = index;
+        //            break;
+        //          }
+        //        }
+      },
+      goBack() {
+        if (this.index <= 0) {
+          if (this.gridThis.hdQuery.page <= 1) { // 开头不能上一条
+            return true
+          }
+          this.gridThis.hdQuery._noLoadingOnce = true
+          this.gridThis.hdQuery.doCurPageChange(this.gridThis.hdQuery.page - 1).then(() => { // 异步
+            this.index = this.gridThis.hdResult.rows.length - 1
+            this.gridThis.$refs.hdgrid.setCurrentRow(this.index)
+            this.choose(this.gridThis.hdQuery.selRow)
+            return true
+          })
+        } else {
+          this.index--
+          this.gridThis.$refs.hdgrid.setCurrentRow(this.index)
+          this.choose(this.gridThis.hdQuery.selRow)
+        }
+      },
+      goNext() {
+        if (this.index >= this.gridThis.hdResult.rows.length - 1) { // 需要翻页
+          console.log('2', this.gridThis.hdQuery.page, this.gridThis.hdResult.total / this.gridThis.hdResult.rows)
+          if (this.gridThis.hdQuery.page >= this.gridThis.hdResult.total / this.gridThis.hdQuery.rows) { // 开头不能上一条
+            return true
+          }
+          this.gridThis.hdQuery._noLoadingOnce = true
+          this.gridThis.hdQuery.doCurPageChange(this.gridThis.hdQuery.page + 1).then(() => { // 翻页成功才能执行
+            this.index = 0
+            this.gridThis.$refs.hdgrid.setCurrentRow(this.index)
+            this.choose(this.gridThis.$refs.hdgrid.hdQuery.selRow)
+            return true
+          })
+        } else {
+          console.log('1', this.index + (this.gridThis.hdQuery.page - 1) * this.gridThis.hdQuery.rows, this.gridThis.hdResult.total)
+          if (this.index + (this.gridThis.hdQuery.page - 1) * this.gridThis.hdQuery.rows >= this.gridThis.hdResult.total) {
+            return true
+          }
+          this.index++
+          this.gridThis.$refs.hdgrid.setCurrentRow(this.index)
+          this.choose(this.gridThis.$refs.hdgrid.hdQuery.selRow)
+        }
+      },
+      pageBack() {
+        if (this.gridThis.hdQuery.page <= 1) { // 开头不能上一条
+          return true
+        }
+        this.gridThis.hdQuery._noLoadingOnce = true
+        this.gridThis.hdQuery.doCurPageChange(this.gridThis.hdQuery.page - 1).then(() => {
+          this.index = 0
+          this.gridThis.$refs.hdgrid.setCurrentRow(0)
+          this.choose(this.gridThis.hdQuery.selRow)
+        })
+      },
+      pageNext() {
+        if (this.gridThis.hdQuery.page >= this.gridThis.hdResult.total / this.gridThis.hdQuery.rows) { // 开头不能上一条
+          return true
+        }
+        this.gridThis.hdQuery._noLoadingOnce = true
+        this.gridThis.hdQuery.doCurPageChange(this.gridThis.hdQuery.page + 1).then(() => {
+          this.index = 0
+          this.gridThis.$refs.hdgrid.setCurrentRow(0)
+          this.choose(this.gridThis.hdQuery.selRow)
+        })
+      },
+      /**
+       * @function doCopy 支持深度复制(对象中嵌套对象)
+       * */
+      doCopy() {
+        const one = JSON.parse(JSON.stringify(this.gridThis.hdQuery.selRow))
+        let noCpLs = ['recNam', 'recTim', 'updNam', 'updNam', 'updTim', 'idevVersionUse']
+        if (this.noCopy) {
+          if (typeof this.noCopy == 'string') { // 可以是字符串或者数组
+            noCpLs.push(this.noCopy)
+          } else {
+            noCpLs = noCpLs.concat(this.noCopy)
+          }
+          for (let j = 0; j < noCpLs.length; j++) { // 不需要复制的属性给null
+            eval('one.' + noCpLs[j] + ' = null')
+          }
+        }
+        this.$message({
+          type: 'success',
+          message: this.$t('复制完成'),
+          duration: 1500
+        })
+        one._isAdd = true
+        this.index = 0
+        this.choose(one)
+      },
+      /**
+       * @function doSave  触发事件:this.$emit('saveCall', data.data, this.$attrs.model._isAdd)
+       * */
+      doSave() {
+        const promise = new Promise((resolve, reject) => {
+          this.$refs.hdform.validate((valid) => {
+            if (!valid) {
+              reject()
+              return false
+            }
+            this.loading = true
+            this.$http.post(this.saveoneUrl ? this.saveoneUrl : this.gridThis.saveoneUrl, this.$attrs.model).then(response => {
+              this.loading = false
+              const data = response.data
+              this.$message({
+                type: data.code == '-1' ? 'error' : 'success',
+                message: data.message,
+                duration: 1500
+              })
+              if (data.code == '-1') {
+                reject(data)
+                return
+              }
+              this.$emit('saveCall', data.data, this.$attrs.model._isAdd)
+              if (this.$attrs.model._isAdd) {
+                // this.index++ // 插入的index+1
+                // this.gridThis.hdResult.rows.splice(this.index, 0, data.data)
+                // this.gridThis.$refs.hdgrid.setCurrentRow(this.index)
+
+                // this.index = 0 // 插入的index+1
+                console.log(this.gridThis.hdResult.rows);
+                this.gridThis.hdResult.rows.unshift(data.data)
+                this.gridThis.$refs.hdgrid.setCurrentRow(this.index)
+              } else {
+                Object.assign(this.gridThis.hdResult.rows[this.index], data.data)
+              }
+              this.$emit('update:model', Object.assign({}, data.data))
+              resolve(data)
+            }).catch(() => {
+              this.loading = false
+              reject()
+            })
+          })
+        })
+        return promise
+      },
+      /**
+       * @function doDel  触发事件: this.$emit('delCall', this.gridThis.hdQuery.selRow)
+       * */
+      doDel() {
+        const promise = new Promise((resolve, reject) => {
+          this.$confirm(this.$t('确定删除本数据?'), this.$t('提示'), {}).then(() => {
+            this.$http.post(this.removeUrl ? this.removeUrl : this.gridThis.removeUrl, this.$attrs.model).then(response => {
+              const data = response.data
+              this.$emit('delCall', this.gridThis.hdQuery.selRow)
+              this.$message({
+                type: data.code == '-1' ? 'error' : 'success',
+                showClose: true,
+                duration: 1500,
+                message: data.message
+              })
+              if (data.code == '-1') {
+                reject(data)
+                return
+              }
+              this.gridThis.hdResult.rows.remove(this.gridThis.hdQuery.selRow)
+              if (this.gridThis.hdResult.rows.length != 0) {
+                this.gridThis.$refs.hdgrid.setCurrentRow(this.index)
+                this.choose(this.gridThis.hdQuery.selRow)
+              } else {
+                this.doAdd()// 删除最后一条时增加
+              }
+              resolve(data)
+              // this.hdQuery.doCurPageChange(1);
+            }).catch(() => {
+              reject()
+            })
+          }).catch(() => {
+            reject()
+          })
+        })
+        return promise
+      },
+      doAdd() {
+        this.index = 0
+        this.choose('')
+      }
+    }
+  }
+</script>
+

package/src/hdcom/HdFormBtn.vue

@@ -0,0 +1,89 @@
+<template>
+  <span style="height: 100%;">
+    <span style="width:110px; display:inline-block;">
+      {{pageMessage}}
+    </span>
+    <span>
+      <!--<el-button type="" icon="fa fa-fast-backward" @click="goStart()"></el-button>-->
+      <ExButton type="default" icon="fa fa-step-backward" @click="pageBack"></ExButton>
+      <ExButton type="default" icon="fa fa-caret-left" @click="hdForm.goBack()"></ExButton>
+      <ExButton type="default" icon="fa fa-caret-right" @click="hdForm.goNext()"></ExButton>
+      <ExButton type="default" icon="fa fa-step-forward" @click="hdForm.pageNext()"></ExButton>
+      <!--<el-button type="" icon="fa fa-fast-forward" @click="goEnd()"></el-button>-->
+    </span>
+    <span v-if="!hdForm.readForm">
+      <el-button type="primary" @click="hdForm.doCopy()" keyType="copy"
+                 :hotKeyRange="$vnode.context.$options._componentTag">{{$t('复制')}}
+      </el-button>
+      <el-button type="primary" @click="hdForm.doAdd()" keyType="add"
+                 :hotKeyRange="$vnode.context.$options._componentTag" v-if="!hdForm.readForm">{{$t('增加')}}
+      </el-button>
+      <el-button type="danger" @click="doDel()" keyType="del" :disabled="delLoading"
+                 :hotKeyRange="$vnode.context.$options._componentTag">{{$t('删除')}}
+      </el-button>
+      <el-button type="primary" @click="doSave()" keyType="save" :disabled="saveLoading"
+                 :hotKeyRange="$vnode.context.$options._componentTag">{{$t('保存')}}
+      </el-button>
+    </span>
+    <!--      <el-button @click="visible = false">取 消</el-button>
+          <el-button type="primary" @click="submit" :loading="loading"> 确 定</el-button>-->
+  </span>
+</template>
+
+<script>
+/**
+   * form按钮组,必须与HdForm联合使用,使用参照AuthOrgnForm.vue
+   * @module HdFormBtn
+   */
+export default {
+  name: 'HdFormBtn',
+  inheritAttrs: false,
+  data() {
+    return {
+      tsLoading: false,
+      loading: false,
+      hdResult: {},
+      index: 0, // 当前位置
+      hdForm: {}, // 外层form
+      gridThis: { hdQuery: {}, hdResult: {}}, // hdcomgrid对应的列表
+      saveLoading: false,
+      delLoading: false
+    }
+  },
+  props: {},
+  mounted() {
+  },
+  methods: {
+    pageBack() {
+      // console.log(this.gridThis.hdQuery.page);
+      this.hdForm.pageBack()
+    },
+    show(gridThis, hdForm) {
+      this.gridThis = gridThis
+      this.hdForm = hdForm
+    },
+    doSave() {
+      this.saveLoading = true
+      this.hdForm.doSave().then(() => {
+        this.saveLoading = false
+      }).catch(() => {
+        this.saveLoading = false
+      })
+    },
+    doDel() {
+      this.delLoading = true
+      this.hdForm.doDel().then(() => {
+        this.delLoading = false
+      }).catch(() => {
+        this.delLoading = false
+      })
+    }
+  },
+  computed:{
+    pageMessage() {
+      return this.$t(`第{page}页,第{index}条`, {page:this.gridThis.hdQuery.page, index:this.hdForm.index + 1})
+    }
+  }
+}
+</script>
+

package/src/hdcom/HdFormItem.vue

@@ -0,0 +1,35 @@
+<template>
+  <ExFormItem ref="elformitem" v-bind="$attrs" v-on="$listeners" :label="$t($attrs.label)">
+<!--    <slot name="label">-->
+<!--      {{ $t($attrs.label) }}-->
+<!--    </slot>-->
+    <ErrHint :err-msg="getVaildMessage()"/>
+    <slot/>
+  </ExFormItem>
+</template>
+<script>
+
+/**
+ * 覆写ElFormItem,校验有下方文字改为图标+pop
+ * @module HdFormItem
+ */
+export default {
+  name: 'HdFormItem',
+  components: {},
+  inheritAttrs: false,
+  methods: {
+    check() {
+      if (this.$refs.elformitem) {
+        return this.$refs.elformitem.validateState === 'error'
+      }
+    },
+    getVaildMessage() {
+      if (this.$refs.elformitem) {
+        return this.$refs.elformitem.validateMessage
+      }
+      return ''
+    }
+  }
+}
+</script>
+