.

src/packages/hs-select-list/src/child copy.vue

+<template>
+  <div style='width:100%;height:100%;'>
+    <div class="boxInputButton">
+      <el-input
+        :disabled="getDisabled"
+        clearable
+        @clear="clearValue"
+        @blur="onInputBlur"
+        @keydown.native.enter='showDialog'
+        size="mini"
+        v-model="label_value"
+        placeholder="请输入"
+      >
+        <el-button
+          slot="append"
+          icon="el-icon-search"
+          @click='showDialog'
+        ></el-button>
+      </el-input>
+    </div>
+
+    <el-dialog
+      @open='openDialog'
+      top='10px'
+      :close-on-click-modal='false'
+      :before-close='beforeClose'
+      :append-to-body='true'
+      center
+      title="查询"
+      :visible.sync="dialogTableVisible"
+      :width="dialogWidth"
+    >
+      <div class="contentBox">
+        <div
+          class="leftBox"
+          :style="{'width':tableWithLeft}"
+        >
+          <el-divider content-position="left">所有项</el-divider>
+          <hs-dync-form
+            height='55px'
+            @searchSubmit='queryLeft'
+            type='queryArea'
+            :formParms='searchFormLeft'
+            :elInfo='hsDyncFormElLeft'
+            :config='hsDyncFormConfigLeft'
+            v-bind="$attrs"
+            v-on="$listeners"
+          >
+          </hs-dync-form>
+          <hs-table
+            :width='tableWithLeft'
+            :height="tableHeightLeft"
+            :config='leftHsTableConfig'
+            :data='leftTabeData'
+            :paging='pagingLeft'
+            :elInfo='hsTableElLeft'
+            @paginationFun="paginationFunLeft"
+            v-bind="$attrs"
+            v-on="$listeners"
+          >
+          </hs-table>
+        </div>
+        <div class="rightLeftIcon">
+          <el-button-group>
+            <el-button
+              @click="goLeftTable"
+              size='mini'
+              type="primary"
+              icon="el-icon-arrow-left"
+            ></el-button>
+            <el-button
+              @click="goRightTable"
+              size='mini'
+              type="primary"
+            ><i class="el-icon-arrow-right el-icon--right"></i></el-button>
+          </el-button-group>
+        </div>
+        <div
+          class="rightBox"
+          :style="{'width':tableWithRight}"
+        >
+          <el-divider content-position="left">已选区</el-divider>
+          <hs-dync-form
+            height='55px'
+            @searchSubmit='queryRight'
+            type='queryArea'
+            :formParms='searchFormRight'
+            :elInfo='hsDyncFormElRight'
+            :config='hsDyncFormConfigRight'
+            v-bind="$attrs"
+            v-on="$listeners"
+          >
+          </hs-dync-form>
+          <hs-table
+            :width='tableWithRight'
+            :height="tableHeightRight"
+            :paging='pagingRight'
+            :data='rightTabeData'
+            :config='rightHsTableConfig'
+            :elInfo='hsTableElRight'
+            @paginationFun="paginationFunRight"
+            v-bind="$attrs"
+            v-on="$listeners"
+          >
+          </hs-table>
+        </div>
+
+      </div>
+
+      <div
+        slot="footer"
+        class="dialog-footer"
+        v-if='!getDisabled'
+      >
+        <div class="cacelSubmit">
+          <el-button
+            size='mini'
+            @click="beforeClose"
+          >取 消</el-button>
+          <el-button
+            size='mini'
+            type="primary"
+            @click="submit"
+          >确 定</el-button>
+          <el-button
+            size='mini'
+            icon='el-icon-position'
+            type="primary"
+            @click="showAddPage"
+          >新增</el-button>
+        </div>
+      </div>
+    <!-- <hsIframeDialog ref='appIframePageBoxA'></hsIframeDialog> -->
+    </el-dialog>
+
+<el-dialog
+  title="提示"
+  :visible.sync="dialogVisible"
+  width="30%"
+  :append-to-body='true'
+  :before-close="handleClose">
+  <span>这是一段信息</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">取 消</el-button>
+    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+  </span>
+</el-dialog>
+  </div>
+</template>
+<script>
+import hsUtil from 'hs-util-js'
+import commonMixins from '../../ucClass/commonMixins'
+import _ from 'lodash'
+import hsIframeDialog from '../../hs-iframe-dialog/src/index.vue'
+export default {
+  mixins: [commonMixins],
+  components: {
+    hsIframeDialog
+  },
+  name: 'select-list-component',
+  computed: {
+    getDisabled: function() {
+      const { disabled, disabledLevel } = this.configData
+      const type = typeof disabled
+      if (disabledLevel === 1) {
+        // 以自己的的配置为优先级最高
+        if (type === 'function') {
+          return disabled(this.formData)
+        } else {
+          return disabled
+        }
+      } else {
+        if (type === 'function') {
+          return this.disabled || disabled(this.formData)
+        } else {
+          return this.disabled || disabled
+        }
+      }
+    },
+    hsDyncFormConfigLeft: function() {
+      // 获取控件配置
+      const { config } = this.$listeners.findTargetControl(
+        this.hsDyncFormElLeft.position,
+        'hsDyncFormComponent'
+      )
+      return config
+    },
+    rightHsTableConfig() {
+      const { config } = this.$listeners.findTargetControl(
+        this.hsTableElRight.position,
+        'hsTableSimple'
+      )
+      return config
+    },
+    leftHsTableConfig() {
+      const { config } = this.$listeners.findTargetControl(
+        this.hsTableElLeft.position,
+        'hsTableSimple'
+      )
+      return config
+    },
+    leftHsTableData() {
+      return this.leftTabeData || []
+    },
+    hsDyncFormElLeft: function() {
+      return {
+        el: 'hsDyncFormComponent',
+        position: this.elInfo.position + 'hsDyncForm'
+      }
+    },
+    hsDyncFormElRight: function() {
+      return {
+        el: 'hsDyncFormComponent',
+        position: this.elInfo.position + 'hsDyncFormRight'
+      }
+    },
+    hsDyncFormConfigRight: function() {
+      // 获取控件配置
+      const { config } = this.$listeners.findTargetControl(
+        this.hsDyncFormElRight.position,
+        'hsDyncFormComponent'
+      )
+      return config
+    },
+    hsTableElRight: function() {
+      return {
+        el: 'hsTableSimple',
+        position: this.elInfo.position + 'hsTableRight'
+      }
+    },
+    hsTableElLeft: function() {
+      return {
+        el: 'hsTableSimple',
+        position: this.elInfo.position + 'hsTableLeft'
+      }
+    },
+    configData: function() {
+      return this.config || {}
+    },
+    label_value: {
+      get() {
+        return this.formData[this.configData.displayfield]
+      },
+      set(value) {
+        if (this.configData.displayfield) {
+          this.formData[this.configData.displayfield] = value
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      dialogTableVisible: false,
+      searchFormLeft: {
+        queryArea: 'left'
+      },
+      label_value_old: '',
+      isChange: false,
+      selectedData: [],
+      firstQuery: true,
+      tableDataRight: [],
+      tableDataLeft: [],
+      mockData: [
+        { A: 'A', id: 1, B: 'B' },
+        { A: 'AA', id: 2, B: 'BB' }
+      ],
+      tableWithLeft: '100%',
+      tableWithRight: '100%',
+      tableHeightLeft: '400px',
+      tableHeightRight: '400px',
+      searchFormRight: {
+        queryArea: 'right'
+      },
+      rightTabeData: [],
+      pagingRight: null,
+      leftTabeData: [],
+      pagingLeft: null,
+      dialogWidth: '95%',
+      dialogVisible: false
+    }
+  },
+  methods: {
+    handleClose() {},
+    /**
+     * 数据导入 item 当前点击的按钮
+     * @param {*} item
+     */
+    async showAddPage() {
+      this.dialogVisible = true
+      return
+      this.isChange = false
+      const configData = this.$listeners.dealWithConfig(
+        this.configData,
+        this.formData
+      )
+      const { dyncQueryParms } = configData.linkBtnUi
+      const parms = dyncQueryParms || {}
+      parms.db_name = this.dbName || ''
+      parms.isInnerDialog = 1
+      parms.isAdd = 1
+      parms.notDirectNew = 1
+      const { url } = configData.linkBtnUi
+      const data = await this.$refs.appIframePageBoxA.show(url, parms, {}, {})
+      if (data && data.main) {
+        const { value } = this.configData
+        // 调用外面的查询方法
+        if (this.value) {
+          this.value = this.value + ',' + data.main[value]
+        } else {
+          this.value = data.main[value]
+        }
+        await this.queryRight()
+      }
+      this.queryLeft()
+      // if (data) {
+      //   const main_row = data.main
+      //   let writebackfield_ = []
+      //   if (writebackfield && writebackfield.length) {
+      //     writebackfield_ = writebackfield
+      //   } else {
+      //     const { ref } = this.configData
+      //     const { writebackfield } = ref
+      //     if (writebackfield && writebackfield.length) {
+      //       writebackfield_ = writebackfield
+      //     }
+      //   }
+      //   this.setWriteBack(writebackfield_, main_row, true)
+      // }
+    },
+    // 回写字段
+    setWriteBack(writebackfield, data, f) {
+      if (!data || typeof data !== 'object') return
+      for (const item of writebackfield) {
+        const [key, value] = item.split('=')
+        const result = value ? data[value] : data[key]
+        if (result !== undefined) {
+          this.$set(this.formData, key, result)
+        } else {
+          this.$set(this.formData, key, '')
+        }
+      }
+      if (f) {
+        // f:true 时 是iframe返回的数据,如果回写字段中有 filed 则使用配置的,否则 要给filed 设置值
+        const taregtFiled = writebackfield.find(item => {
+          const [key] = item.split('=')
+          if (key === this.filed) {
+            return item
+          }
+        })
+        if (!taregtFiled) {
+          console.warn('未设置回绑定字段,则默认从返回的数据中回写filed')
+          this.$set(this.formData, this.filed, data[this.filed])
+        }
+      }
+    },
+    goLeftTable() {
+      // 获取左边勾选的数据
+      // 插入到右边去
+      const isSelectedList = this.rightTabeData.filter(item => item.isSelected)
+      this.leftTabeData.push(...isSelectedList)
+      this.rightTabeData = this.removeUniq(this.rightTabeData, isSelectedList)
+    },
+    goRightTable() {
+      // 获取左边勾选的数据
+      // 插入到右边去
+      const isSelectedList = this.leftTabeData.filter(item => item.isSelected)
+      this.rightTabeData.push(...isSelectedList)
+      this.leftTabeData = this.removeUniq(this.leftTabeData, isSelectedList)
+    },
+    async showDialog() {
+      if (this.getDisabled) return
+      const { dialogWidth, tableHeight } = this.configData
+      let dialogWidth_ = dialogWidth || this.dialogWidth
+      if (typeof dialogWidth === 'string') {
+        if (dialogWidth.includes('%')) {
+          const getClientWidth = hsUtil.SystemModule.getClientWidth()
+          dialogWidth_ =
+            getClientWidth *
+            (dialogWidth.substring(0, dialogWidth.length - 1) / 100)
+        } else if (dialogWidth.includes('px')) {
+          dialogWidth_ = dialogWidth.substring(0, dialogWidth.length - 2)
+        }
+      }
+      if (dialogWidth) {
+        this.dialogWidth = dialogWidth_ + 'px'
+      }
+      this.tableWithLeft = (dialogWidth_ - 100) / 2 + 'px'
+      this.tableWithRight = (dialogWidth_ - 100) / 2 + 'px'
+      if (tableHeight) {
+        if (typeof tableHeight === 'string' && tableHeight.includes('px')) {
+          this.tableHeightLeft = tableHeight
+          this.tableHeightRight = tableHeight
+        } else if (typeof tableHeight === 'number') {
+          this.tableHeightLeft = tableHeight + 'px'
+          this.tableHeightRight = tableHeight + 'px'
+        }
+      } else {
+        const getClientHeight = hsUtil.SystemModule.getClientHeight()
+        this.tableHeightLeft = getClientHeight - 260 + 'px'
+        this.tableHeightRight = getClientHeight - 260 + 'px'
+      }
+      if (this.value) {
+        await this.queryRight()
+      }
+      await this.queryLeft()
+      this.dialogTableVisible = true
+    },
+    /**
+     * 焦点失去事件
+     */
+    onInputBlur() {
+      // if (this.dialogTableVisible) return
+      // this.label_value = this.label_value_old
+    },
+
+    async queryRight() {
+      const { value } = this.configData
+      // 调用外面的查询方法
+      this.searchFormRight[value] = this.value
+      const data = await this.$listeners.queryLookup(
+        this.configData,
+        this.searchFormRight,
+        this.formData
+      )
+      const { paging, table } = data
+      if (paging) {
+        this.pagingRight = paging
+        this.rightTabeData = table || []
+      } else {
+        this.rightTabeData = data || []
+      }
+      this.rightTabeData.forEach(item => {
+        item.isSelected = true
+      })
+    },
+    /**
+     * 查询table数据
+     */
+    async queryLeft() {
+      // 如果有分页信息则要分页
+      const { per_page } = this.configData
+      if (per_page && this.firstQuery) {
+        this.firstQuery = false
+        this.searchFormLeft.per_page = per_page
+        this.searchFormLeft.page = 1
+      }
+      // 调用外面的查询方法
+      const data = await this.$listeners.queryLookup(
+        this.configData,
+        this.searchFormLeft,
+        this.formData
+      )
+      const { paging, table } = data
+      if (paging) {
+        this.pagingLeft = paging
+        this.leftTabeData = table || []
+      } else {
+        this.leftTabeData = data || []
+      }
+      // 这里要去把 存在右边的数据从左边删除掉
+      this.leftTabeData = this.removeRightExitData(this.leftTabeData)
+      return this.leftTabeData
+    },
+    /**
+     * 移除掉已存在的数据
+     */
+    removeUniq(obj1, obj2) {
+      const { value } = this.configData
+      const selectIds = obj2.map(item => item[value])
+      const data = obj1.filter(item => !selectIds.includes(item[value]))
+      return data
+    },
+    /**
+     * 移除掉已存在的数据
+     */
+    removeRightExitData(queryData) {
+      const { value } = this.configData
+      const selectIds = this.rightTabeData.map(item => item[value])
+      const data_ = _.remove(queryData, function(item) {
+        const item_value = item[value]
+        return !selectIds.includes(item_value)
+      })
+      return data_
+    },
+    /**
+     * 将输入框第一个值属性作为查询条件
+     */
+    setDefaultQueryParms() {
+      if (this.dialogTableVisible) return
+      const config = this.hsDyncFormConfig.config
+      const formColumn = config.formColumn
+      const targetItem = formColumn[0]
+      const prop = targetItem.prop
+      this.$set(this.searchFormLeft, prop, this.label_value)
+    },
+    /**
+     * 多选时必须点击确定按钮
+     */
+    submit() {
+      const prop = this.configData.value
+      const list_ids = this.rightTabeData.map(x => {
+        return x[prop]
+      })
+      this.$emit('input', list_ids.join(','))
+      this.changeAction(list_ids.join(','))
+      this.setLabelValue()
+      // 设置回写字段
+      this.setWritebackfield()
+      this.dialogTableVisible = false
+    },
+    setLabelValue() {
+      const selectData = this.rightTabeData
+      const displayfield = this.configData.displayfield
+      const label = this.configData.label || displayfield
+      const label_list = selectData.map(x => x[label])
+      this.$set(this.formData, displayfield, label_list.join(','))
+      this.label_value = label_list.join(',')
+    },
+    /**
+     * 设置回写字段
+     */
+    setWritebackfield() {
+      this.isChange = true
+      const selectData = this.rightTabeData
+      const writebackfield = this.configData.writebackfield
+      if (writebackfield) {
+        // 解析回写字段
+        writebackfield.forEach(item => {
+          const [v1, v2] = item.split('=')
+          if (v2) {
+            // 说明有=分割
+            this.$set(this.formData, v1, selectData.map(x => x[v2]).join(','))
+          } else {
+            this.$set(this.formData, v1, selectData.map(x => x[v1]).join(','))
+          }
+        })
+      }
+    },
+    /**
+     * 清除回写字段
+     */
+    clearWritebackfield() {
+      const writebackfield = this.configData.writebackfield || []
+      const displayfield = this.configData.displayfield
+      this.$set(this.formData, displayfield, '')
+      writebackfield.forEach(item => {
+        const [v1, v2] = item.split('=')
+        if (v2) {
+          // 说明有=分割
+          this.formData[v1] = ''
+        } else {
+          this.formData[v1] = ''
+        }
+      })
+    },
+    beforeClose() {
+      if (!this.isChange) {
+        // this.label_value = this.label_value_old
+      }
+      this.tableDataRight = []
+      this.dialogTableVisible = false
+    },
+    openDialog() {
+      this.isChange = false
+    },
+    changeAction(ids) {
+      const { changed } = this.configData
+      const type = typeof changed
+      if (type === 'function') {
+        const obj = changed(ids, this.formData) // changed事件回写当前行字段
+        if (obj && Object.keys(obj)) {
+          for (const k in obj) {
+            if (k in this.formData) {
+              this.formData[k] = obj[k]
+            } else {
+              this.$set(this.formData, k, obj[k])
+            }
+          }
+        }
+      }
+    },
+    /**
+     * 表格分页查询
+     */
+    paginationFunLeft(data) {
+      const { page, pageSize } = data
+      this.searchFormLeft.page = page
+      this.searchFormLeft.per_page = pageSize
+      this.queryLeft()
+    },
+    paginationFunRight(data) {
+      const { page, pageSize } = data
+      this.searchFormRight.page = page
+      this.searchFormRight.per_page = pageSize
+      this.queryRight()
+    },
+    /**
+     * 点击清除按钮时
+     * 要把值清空
+     */
+    clearValue() {
+      this.$emit('input', '')
+      this.clearWritebackfield()
+    },
+    /**
+     * 上移
+     */
+    up() {
+      const selectIndexData = []
+      this.rightTabeData.forEach((x, index) => {
+        if (x.isSelected) {
+          selectIndexData.push(index)
+        }
+      })
+      hsUtil.TableHandleModule.batchUp(this.rightTabeData, selectIndexData)
+    },
+    /**
+     * 下移动
+     */
+    down() {
+      const selectIndexData = []
+      this.rightTabeData.forEach((x, index) => {
+        if (x.isSelected) {
+          selectIndexData.push(index)
+        }
+      })
+      hsUtil.TableHandleModule.batchDown(this.rightTabeData, selectIndexData)
+    }
+  },
+  mounted() {}
+}
+</script>
+<style scoped>
+.showBox {
+  position: relative;
+  width: 100%;
+  border: 1px solid #e6e6e6;
+  border-radius: 5px;
+  padding-left: 10px;
+  height: 28px;
+  line-height: 28px;
+  text-align: left;
+}
+.hslookupClose {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}
+.contentBox {
+  display: flex;
+}
+.leftBox {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.emptyBoxRight {
+  height: 40px;
+  text-align: center;
+}
+.rightBox {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.rightLeftIcon {
+  width: 100px;
+  display: flex;
+  align-items: center;
+}
+.contentBox >>> .el-divider--horizontal {
+  margin: 5px 0;
+}
+.boxInputButton {
+  display: flex;
+}
+</style>

src/packages/hs-select-list/src/child.vue

@@ -18,8 +18,115 @@
         ></el-button>
       </el-input>
     </div>
+    <hs-dialog 
+      ref='hsDialog'
+    :visible='dialogTableVisible'
+    :config='dialogConfig'
+    @close='handleClose'
+    >
+      <div slot="body">
+        <div class="contentBox">
+          <div
+            class="leftBox"
+            :style="{'width':tableWithLeft}"
+          >
+            <el-divider content-position="left">所有项</el-divider>
+            <hs-dync-form
+              height='55px'
+              @searchSubmit='queryLeft'
+              type='queryArea'
+              :formParms='searchFormLeft'
+              :elInfo='hsDyncFormElLeft'
+              :config='hsDyncFormConfigLeft'
+              v-bind="$attrs"
+              v-on="$listeners"
+            >
+            </hs-dync-form>
+            <hs-table
+              :width='tableWithLeft'
+              :height="tableHeightLeft"
+              :config='leftHsTableConfig'
+              :data='leftTabeData'
+              :paging='pagingLeft'
+              :elInfo='hsTableElLeft'
+              @paginationFun="paginationFunLeft"
+              v-bind="$attrs"
+              v-on="$listeners"
+            >
+            </hs-table>
+          </div>
+          <div class="rightLeftIcon">
+            <el-button-group>
+              <el-button
+                @click="goLeftTable"
+                size='mini'
+                type="primary"
+                icon="el-icon-arrow-left"
+              ></el-button>
+              <el-button
+                @click="goRightTable"
+                size='mini'
+                type="primary"
+              ><i class="el-icon-arrow-right el-icon--right"></i></el-button>
+            </el-button-group>
+          </div>
+          <div
+            class="rightBox"
+            :style="{'width':tableWithRight}"
+          >
+            <el-divider content-position="left">已选区</el-divider>
+            <hs-dync-form
+              height='55px'
+              @searchSubmit='queryRight'
+              type='queryArea'
+              :formParms='searchFormRight'
+              :elInfo='hsDyncFormElRight'
+              :config='hsDyncFormConfigRight'
+              v-bind="$attrs"
+              v-on="$listeners"
+            >
+            </hs-dync-form>
+            <hs-table
+              :width='tableWithRight'
+              :height="tableHeightRight"
+              :paging='pagingRight'
+              :data='rightTabeData'
+              :config='rightHsTableConfig'
+              :elInfo='hsTableElRight'
+              @paginationFun="paginationFunRight"
+              v-bind="$attrs"
+              v-on="$listeners"
+            >
+            </hs-table>
+          </div>
 
+        </div>
+      </div>
+      <template
+        slot="footer"
+        v-if='!getDisabled'
+      >
+        <div class="cacelSubmit">
+          <el-button
+            size='mini'
+            @click="beforeClose"
+          >取 消</el-button>
+          <el-button
+            size='mini'
+            type="primary"
+            @click="submit"
+          >确 定</el-button>
+          <el-button
+            size='mini'
+            icon='el-icon-position'
+            type="primary"
+            @click="showAddPage"
+          >新增</el-button>
+        </div>
+      </template>
+    </hs-dialog>
     <el-dialog
+      v-if="false"
       @open='openDialog'
       top='10px'
       :close-on-click-modal='false'
@@ -130,21 +237,9 @@
           >新增</el-button>
         </div>
       </div>
-    <!-- <hsIframeDialog ref='appIframePageBoxA'></hsIframeDialog> -->
-    </el-dialog>
 
-<el-dialog
-  title="提示"
-  :visible.sync="dialogVisible"
-  width="30%"
-  :append-to-body='true'
-  :before-close="handleClose">
-  <span>这是一段信息</span>
-  <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogVisible = false">取 消</el-button>
-    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-  </span>
-</el-dialog>
+    </el-dialog>
+    <hsIframeDialog ref='appIframePageBoxA'></hsIframeDialog>
   </div>
 </template>
 <script>
@@ -276,7 +371,10 @@ export default {
       leftTabeData: [],
       pagingLeft: null,
       dialogWidth: '95%',
-      dialogVisible: false
+      dialogVisible: false,
+      dialogConfig: {
+        title: '查询'
+      }
     }
   },
   methods: {
@@ -286,8 +384,6 @@ export default {
      * @param {*} item
      */
     async showAddPage() {
-      this.dialogVisible = true
-      return
       this.isChange = false
       const configData = this.$listeners.dealWithConfig(
         this.configData,
@@ -674,4 +770,8 @@ export default {
 .boxInputButton {
   display: flex;
 }
+.cacelSubmit{
+      display: flex;
+    justify-content: center;
+}
 </style>