@tongfun/tf-widget 0.1.18 → 0.1.22

package/package/t-input/children/basic.vue

@@ -1,251 +1,253 @@
-<template>
-  <div class="basic-input">
-    <!-- 输入控件 -->
-    <el-autocomplete
-      ref="basic"
-      v-model="displayValue"
-      placeholder=""
-      :fetch-suggestions="getAdvice"
-      :disabled="disabled"
-      popper-class="basic-suggest-poper"
-      :trigger-on-focus="false"
-      @select="handleSelect"
-      @keydown.delete.native="handleDeleteKeyDown"
-    >
-      <i slot="suffix" class="el-icon-search" style="cursor: pointer" @click="showDialog" />
-      <template slot-scope="{item}">
-        <div>{{ suggestDisplay(item) }}</div>
-      </template>
-    </el-autocomplete>
-
-    <!-- 弹窗数据选择器 -->
-    <el-dialog
-      :visible.sync="dialogVisible"
-      width="80%"
-      :append-to-body="appendToBody"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :modal-append-to-body="modalAppendToBody"
-      @open="getTableData"
-    >
-      <div class="dataDialog">
-        <Ttable
-          class="t-table"
-          is-selector
-          :layout="tableLayout"
-          :sum="tableSum"
-          :data="tableData"
-          enable-group
-          :page-size="query.pageSize"
-          :current-page="query.pageNum"
-          update-in-dialog
-          @condition-change="handleHeadChange"
-          @groupChange="handleGroupChange"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          @fastConfirm="handleFastSelect"
-        />
-      </div>
-      <template v-slot:title>
-        <div class="common-title">
-          <TListSearch class="common-table-buttons-search" @search="handleSuggestMultiCondition($event,true)" />
-        </div>
-      </template>
-      <span slot="footer" class="dialog-footer basic-selector-footer">
-        <el-button class="common-header-button close" size="mini" type="primary" @click="dialogVisible = false">取 消</el-button>
-        <el-button class="common-header-button" size="mini" type="primary" @click="handleDialogConfirm">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import TListSearch from '../../t-data-list/src/t-list-search.vue'
-import Ttable from '../../t-data-list/src/t-table/index'
-import dataQuery from '@/mixins/t-data-query-mixin.js'
-export default {
-  components: {
-    TListSearch,
-    Ttable
-  },
-  mixins: [dataQuery],
-  props: {
-    value: {
-      type: Object,
-      default: () => {
-        return { name: '', id: null }
-      }
-    },
-    limitation: {
-      type: Object,
-      default: () => {}
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    appendToBody: {
-      type: Boolean,
-      default: true
-    },
-    modalAppendToBody: {
-      type: Boolean,
-      default: false
-    }
-  },
-  inject: ['target', 'entity'],
-  data () {
-    return {
-      dialogVisible: false,
-      // 选中一个基础资料之后，基础资料控件显示的名称
-      displayField: null,
-      queryType: 'SELECTOR'
-    }
-  },
-  computed: {
-    displayValue: {
-      set (value) {
-        if (this.value.id) {
-          return
-        }
-        this.value.name = value
-      },
-      get () {
-        if (!this.value) {
-          return
-        }
-        return this.value.name
-      }
-    }
-  },
-  created () {
-    if (this.entity) {
-      this.$nextTick(() => {
-        this.$refs.basic.focus()
-      })
-    }
-    this.getTableLayout()
-  },
-  methods: {
-    /**
-     * 弹窗和数据选择
-     */
-    // 展开弹窗
-    showDialog () {
-      if (this.disabled) {
-        return
-      }
-      this.dialogVisible = true
-    },
-    // 点击弹窗确定按钮
-    handleDialogConfirm () {
-      if (!this.ids.length) {
-        this.dialogVisible = false
-        return
-      }
-
-      if (!this.entity && this.ids.length > 1) {
-        return this.$message.error('单据头中只能选择一条数据')
-      }
-
-      if (!this.entity) {
-        const name = this.selectedRows[0][this.displayField]
-        const id = this.ids[0]
-        this.$emit('input', { name, id })
-        this.$emit('selected', this.selectedRows)
-      } else {
-        this.$emit('selected', this.selectedRows)
-      }
-      this.dialogVisible = false
-    },
-    // 双击选择数据
-    handleFastSelect (row) {
-      this.$emit('input', { name: row[this.displayField], id: row[this.idField] })
-      this.$emit('selected', [row])
-      this.dialogVisible = false
-    },
-    /**
-     * 输入框相关逻辑
-     */
-    // 删除按键处理函数
-    handleDeleteKeyDown () {
-      if (this.value.id) {
-        this.$emit('input', { name: '', id: null })
-        this.$emit('delete')
-      }
-    },
-    // 获取搜索建议
-    // 此时的搜索建议也需要对限定范围条件进行拼接
-    async getAdvice (queryString, callback) {
-      let record = []
-      if (!/^\s*$/g.test(queryString)) {
-        this.handleSuggestMultiCondition(queryString, false)
-        record = await this.getTableData(true, false)
-      }
-      callback(record)
-    },
-    // 搜索建议的显示格式
-    suggestDisplay (item) {
-      const valueList = []
-      for (const fieldObj of this.suggestFieldList) {
-        valueList.push(item[fieldObj.field])
-      }
-      return valueList.join('/')
-    },
-    // 搜索建议被选择
-    handleSelect (item) {
-      const name = item[this.displayField]
-      const id = item[this.idField]
-      this.$emit('input', { name, id })
-      this.$emit('selected', [item])
-    }
-  }
-}
-</script>
-
-<style>
-.basic-suggest-poper {
-  width:unset !important;
-}
-</style>
-<style lang="less" scoped>
-  .el-autocomplete {
-    ::v-deep .el-input__suffix {
-      display:flex;
-      align-items:center;
-    }
-  }
-
-/deep/.t-table{
-  height: 59vh;
-  .table-records{
-    height: 100%;
-    position: relative;
-    .plTableBox .elx-table--body-wrapper{
-      height: calc(59vh - 80px);
-    }
-    .el-pagination{
-      right: 0;
-    }
-  }
-}
-/deep/.el-dialog__body{
-  padding-top: 0;
-}
-
-.basic-selector-footer {
-  .el-button {
-    background-color: #0A5194;
-    border:none;
-  }
-}
-
-.common-title{
-  // background-color: pink;
-  display:flex;
-  justify-content: right;
-  .common-table-buttons-search{
-    margin-right:50px;
-  }
-}
-
-</style>
+<template>
+  <div class="basic-input">
+    <!-- 输入控件 -->
+    <el-autocomplete
+      ref="basic"
+      v-model="displayValue"
+      placeholder=""
+      :fetch-suggestions="getAdvice"
+      :disabled="disabled"
+      popper-class="basic-suggest-poper"
+      :trigger-on-focus="false"
+      @select="handleSelect"
+      @keydown.delete.native="handleDeleteKeyDown"
+    >
+      <i slot="suffix" class="el-icon-search" style="cursor: pointer" @click="showDialog" />
+      <template slot-scope="{item}">
+        <div>{{ suggestDisplay(item) }}</div>
+      </template>
+    </el-autocomplete>
+
+    <!-- 弹窗数据选择器 -->
+    <el-dialog
+      :visible.sync="dialogVisible"
+      width="80%"
+      :append-to-body="appendToBody"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :modal-append-to-body="modalAppendToBody"
+      @open="getTableData"
+    >
+      <!-- {{ limitation }} -->
+      <div class="dataDialog">
+        <Ttable
+          class="t-table"
+          is-selector
+          :layout="tableLayout"
+          :sum="tableSum"
+          :data="tableData"
+          enable-group
+          :page-size="query.pageSize"
+          :current-page="query.pageNum"
+          update-in-dialog
+          @condition-change="handleHeadChange"
+          @groupChange="handleGroupChange"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          @fastConfirm="handleFastSelect"
+        />
+      </div>
+      <template v-slot:title>
+        <div class="common-title">
+          <TListSearch class="common-table-buttons-search" @search="handleSuggestMultiCondition($event,true)" />
+        </div>
+      </template>
+      <span slot="footer" class="dialog-footer basic-selector-footer">
+        <el-button class="common-header-button close" size="mini" type="primary" @click="dialogVisible = false">取 消</el-button>
+        <el-button class="common-header-button" size="mini" type="primary" @click="handleDialogConfirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import TListSearch from '../../t-data-list/src/t-list-search.vue'
+import Ttable from '../../t-data-list/src/t-table/index'
+import dataQuery from '@/mixins/t-data-query-mixin.js'
+export default {
+  components: {
+    TListSearch,
+    Ttable
+  },
+  mixins: [dataQuery],
+  props: {
+    value: {
+      type: Object,
+      default: () => {
+        return { name: '', id: null }
+      }
+    },
+    limitation: {
+      type: Object,
+      default: () => {}
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true
+    },
+    modalAppendToBody: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: ['target', 'entity'],
+  data () {
+    return {
+      dialogVisible: false,
+      // 选中一个基础资料之后，基础资料控件显示的名称
+      displayField: null,
+      queryType: 'SELECTOR'
+    }
+  },
+  computed: {
+    displayValue: {
+      set (value) {
+        if (this.value.id) {
+          return
+        }
+        this.value.name = value
+      },
+      get () {
+        if (!this.value) {
+          return
+        }
+        return this.value.name
+      }
+    }
+  },
+  created () {
+    if (this.entity) {
+      this.$nextTick(() => {
+        this.$refs.basic.focus()
+      })
+    }
+    this.getTableLayout()
+  },
+  methods: {
+    /**
+     * 弹窗和数据选择
+     */
+    // 展开弹窗
+    showDialog () {
+      if (this.disabled) {
+        return
+      }
+      this.dialogVisible = true
+    },
+    // 点击弹窗确定按钮
+    handleDialogConfirm () {
+      if (!this.ids.length) {
+        this.dialogVisible = false
+        return
+      }
+
+      if (!this.entity && this.ids.length > 1) {
+        return this.$message.error('单据头中只能选择一条数据')
+      }
+
+      if (!this.entity) {
+        const name = this.selectedRows[0][this.displayField]
+        const id = this.ids[0]
+        this.$emit('input', { name, id })
+        this.$emit('selected', this.selectedRows)
+      } else {
+        this.$emit('selected', this.selectedRows)
+      }
+      this.dialogVisible = false
+    },
+    // 双击选择数据
+    handleFastSelect (row) {
+      this.$emit('input', { name: row[this.displayField], id: row[this.idField] })
+      this.$emit('selected', [row])
+      this.dialogVisible = false
+    },
+    /**
+     * 输入框相关逻辑
+     */
+    // 删除按键处理函数
+    handleDeleteKeyDown () {
+      if (this.value.id) {
+        this.$emit('input', { name: '', id: null })
+        this.$emit('delete')
+      }
+    },
+    // 获取搜索建议
+    // 此时的搜索建议也需要对限定范围条件进行拼接
+    async getAdvice (queryString, callback) {
+      let record = []
+      if (!/^\s*$/g.test(queryString)) {
+        this.handleSuggestMultiCondition(queryString, false)
+        record = await this.getTableData(true, false)
+      }
+      callback(record)
+    },
+    // 搜索建议的显示格式
+    suggestDisplay (item) {
+      const valueList = []
+      for (const fieldObj of this.suggestFieldList) {
+        valueList.push(item[fieldObj.field])
+      }
+      return valueList.join('/')
+    },
+    // 搜索建议被选择
+    handleSelect (item) {
+      const name = item[this.displayField]
+      const id = item[this.idField]
+      this.$emit('input', { name, id })
+      this.$emit('selected', [item])
+    }
+  }
+}
+</script>
+
+<style>
+.basic-suggest-poper {
+  width:unset !important;
+}
+</style>
+<style lang="less" scoped>
+  .el-autocomplete {
+    ::v-deep .el-input__suffix {
+      display:flex;
+      align-items:center;
+    }
+  }
+
+/deep/.t-table{
+  height: 59vh;
+  .table-records{
+    height: 100%;
+    position: relative;
+    .plTableBox .elx-table--body-wrapper{
+      height: calc(59vh - 80px);
+      overflow-x:scroll;
+    }
+    .el-pagination{
+      right: 0;
+    }
+  }
+}
+/deep/.el-dialog__body{
+  padding-top: 0;
+}
+
+.basic-selector-footer {
+  .el-button {
+    background-color: #0A5194;
+    border:none;
+  }
+}
+
+.common-title{
+  // background-color: pink;
+  display:flex;
+  justify-content: right;
+  .common-table-buttons-search{
+    margin-right:50px;
+  }
+}
+
+</style>