kd-aiot-frontend-eam/src/views/ledgerAssets/components/DialogGoods.vue

<template>
  <div class="dialogBox">
    <el-dialog
      :close-on-click-modal="false"
      :append-to-body="appendToBody"
      :title="title"
      :visible.sync="visibleSync"
      :before-close="close"
      :width="width"
      :custom-class="customClass"
    >
      <ele-split-layout
        width="256px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div>
          <div class="select">
            <el-select
              size="small"
              @change="productChange"
              v-model="productId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in productList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="tree">
            <asset-tree
              @handleNodeClick="handleNodeClick"
              ref="AssetTree"
              :paramsType="'type'"
              :init="false"
              id="4"
            />
          </div>
        </div>
        <!-- <div class="minHeight ele-border-lighter split-layout-right-content">
          <template> </template>
          
        </div> -->
        <template v-slot:content>
          <!-- 数据表格 -->
          <ele-pro-table
            ref="table"
            :initLoad="false"
            :columns="columns"
            height="60vh"
            :current.sync="current"
            highlight-current-row
            :datasource="datasource"
            tool-class="ele-toolbar-form"
            cache-key="systemOrgUserTable"
            @row-click="chooseRow"
          >
            <!-- 表头工具栏 -->
            <template v-slot:toolbar>
              <el-row :gutter="22">
                <el-col :span="8">
                  <el-input
                    type="text"
                    v-model="searchForm.searchKey"
                    size="small"
                    placeholder="搜索物品编码/名称"
                  ></el-input>
                </el-col>
                <el-col :span="8">
                  <el-button
                    icon="el-icon-refresh-left"
                    size="small"
                    @click="rest"
                    >重置</el-button
                  >
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="small"
                    @click="reload"
                    >搜索</el-button
                  >
                </el-col>
              </el-row>
            </template>
            <template v-slot:action="{ row }">
              <el-radio class="radio" v-model="radio" :label="row.id"
                ><i></i
              ></el-radio>
            </template>
          </ele-pro-table>
        </template>
      </ele-split-layout>
      <footer slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button @click="submit" type="primary">确认</el-button>
      </footer>
    </el-dialog>
  </div>
</template>
<script>
  import AssetTree from '@/components/AssetTree';
  // import { getList } from "@/api/stockManagement/itemInformation";
  import { getList } from '@/api/classifyManage/itemInformation';
  import dictMixins from '@/mixins/dictMixins';
  import { getTreeByPid } from '@/api/classifyManage';
  export default {
    mixins: [dictMixins],
    props: {
      // 宽度
      width: {
        type: String,
        default: () => null
      },
      // 类名
      customClass: {
        type: String,
        default: () => null
      },
      appendToBody: {
        type: Boolean,
        default: () => false
      }
    },
    components: {
      AssetTree
    },
    data() {
      return {
        productId: '',
        visibleSync: false,
        title: '选择物品',
        searchForm: {
          searchKey: '',
          categoryLevelId: '1'
        },
        current: {},
        radio: null,
        productList: []
      };
    },
    computed: {
      // 表格列配置
      columns() {
        return [
          {
            columnKey: 'index',
            type: 'index',
            width: 80,
            label: '序号',
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'code',
            label: '物品编码',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '物品名称',
            showOverflowTooltip: true
          },
          {
            prop: 'specification',
            label: '规格',
            showOverflowTooltip: true
          },
          {
            prop: 'modelType',
            label: '型号',
            showOverflowTooltip: true
          },
          // {
          //   prop: 'type',
          //   label: '物品类型',
          //   showOverflowTooltip: true,
          //   formatter: (_row) => this.getDictValue('类型用途', _row.type)
          // },
          {
            prop: 'categoryLevelPath',
            label: '分类',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            slot: 'action',
            align: 'center',
            fixed: 'right',
            width: 50
          }
        ];
      }
    },
    created() {
      this.requestDict('类型用途');
    },
    methods: {
      productChange(e) {
        this.$refs.AssetTree.getTreeData(e);
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        return getList({
          ...where,
          pageNum: page,
          size: limit
        });
      },
      reload() {
        this.radio = null;
        this.$nextTick(() => {
          this.$refs.table.reload({
            pageNum: 1,
            where: {
              ...this.searchForm
            }
          });
        });
      },
      async open(id, boolen) {
        this.visibleSync = true;
        const { data } = await getTreeByPid(id);
        this.productList = data;
        this.$refs.AssetTree.getTreeData(id, boolen);
        this.productId = '';
      },
      close() {
        this.visibleSync = false;
      },
      rest() {
        this.searchForm.searchKey = '';
        this.reload();
      },
      handleNodeClick(info) {
        this.searchForm.categoryLevelId = info.id;
        this.reload();
      },
      chooseRow(row) {
        this.current = row;
        this.radio = row.id;
      },
      submit() {
        if (!this.current) {
          return this.$message.error('请选择物品编码');
        }
        this.$emit('succeed', this.current);
        this.close();
      }
    }
  };
</script>
<style lang="scss" scoped>
  .select {
    background: #fafafa;
    border: 1px solid #ededed;
    border-bottom: none;
    padding: 9px 15px;
    .el-select {
      width: 100%;
    }
  }
  .tree {
    height: calc(100vh - 280px);
    border: 1px solid #ededed;
  }
  .from-search-bar {
    display: flex;
    .btn-wrap {
      margin-left: 20px;
    }
  }

  .main {
    display: flex;
    .tree-col {
      margin-right: 10px;
      width: 350px;
      height: 500px;
      overflow-y: auto;
      padding: 0 !important;
      background-color: #fff;
      margin-top: 10px;
      border: 1px solid #e6ebf5;
      border-radius: 4px;
      overflow-x: auto;
      box-sizing: border-box;
    }
    .right-wrap {
      width: 100%;
      margin-top: 10px;
      .tableRef {
        height: 450px;
      }
      .btn-wrap {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
      }
    }
  }
</style>