kd-aiot-frontend-pro/src/components/linkParentDialog/index.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="linkParentDialogFlag"
    :before-close="handleClose"
    :close-on-click-modal="false"
    top="5vh"
    :close-on-press-escape="false"
    append-to-body
    width="70%"
  >
    <el-card shadow="never">
      <ele-split-layout
        width="200px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div class="ele-border-lighter split-layout-right-content">
          <tree
            @handleNodeClick="handleNodeClick"
            :isFirstRefreshTable="false"
            ref="treeListRef"
            :treeList="treeList"
            :pid="parentId"
          />
        </div>
        <!-- 表格 -->
        <template v-slot:content>
          <search @search="reload"></search>
          <ele-pro-table
            ref="table"
            :columns="tableColumns"
            :datasource="datasource"
            row-key="id"
            height="calc(100vh - 430px)"
            class="dict-table"
            @cell-click="cellClick"
          >
            <!-- 表头工具栏 -->
            <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>
    </el-card>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  // import DepartmentTree from '@/components/departmentTree';
  import { contactPage } from '@/api/custom';
  import tree from './components/tree.vue';
  import search from './components/search.vue';
  import selectPersonDialog from '@/BIZComponents/user-select/user-select.vue';

  // import userSelectSearch from '@/BIZComponents/user-select/user-select-search.vue';
  import { getByCode } from '@/api/system/dictionary-data';
  import { projectsPageAPI } from '@/api/project-manage';
  import { reviewStatusEnum } from '@/enum/dict';
  export default {
    components: {
      tree,
      selectPersonDialog,
      search
    },
    props: {
      parentId: { default: '', type: String },
      linkParentDialogFlag: {
        type: Boolean,
        default: false
      },
      multiple: {
        type: Boolean,
        default: false
      },
      treeApi: {
        type: Function,
        require: true
      },
      treeApiCode: {
        default: () => ''
      },
      columns: { default: () => [] },
      tableDataApi: {
        type: Function,
        require: true
      },
      tableDataParams: {
        default: () => {}
      }
    },
    data() {
      return {
        title: '关联项目',
        selection: [],
        // columns: [],
        treeList: [],
        rootId: '',
        params: {
          type: ''
        },
        tableColumns: [
          {
            action: 'action',
            slot: 'action',
            align: 'center',
            label: '选择'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'typeName',
            label: '项目类型',
            showOverflowTooltip: true,
            minWidth: 150,
            align: 'center'
            // slot: 'type',
          },
          {
            prop: 'code',
            label: '项目编码',
            showOverflowTooltip: true,
            minWidth: 160,
            slot: 'code',
            align: 'center'
          },
          {
            prop: 'name',
            label: '项目名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },

          {
            prop: 'responsibleDeptName',
            label: '负责部门',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'responsibleUserName',
            label: '项目经理',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'teamName',
            label: '项目团队',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'cycle',
            label: '项目周期',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'budget',
            label: '项目预算',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return cellValue
                ? cellValue +
                    JSON.parse(
                      localStorage.getItem('pro_projects_budget_unit')
                    )[_row.unit].label
                : '';
            }
          },
          {
            prop: 'planStartDate',
            label: '计划开始日期',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'planEndDate',
            label: '计划完成日期',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'realStartTime',
            label: '实际开始日期',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'realEndTime',
            label: '实际完成日期',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'cost',
            label: '费用(元)',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 140
          },
          {
            prop: 'status',
            label: '项目状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            slot: 'status'
          },
          {
            prop: 'processStatus',
            label: '审核状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            formatter: (_row, _column, cellValue) => {
              return reviewStatusEnum[_row.processStatus].label;
            }
          },
          {
            prop: 'isOverTime',
            label: '是否超时',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            slot: 'isOverTime'
          },
          {
            prop: 'isOverbudget',
            label: '是否超预算',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100,
            slot: 'isOverbudget'
          },
          {
            prop: 'speedPercent',
            label: '项目进度',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            slot: 'speedPercent'
          }
          // {
          //   columnKey: 'action',
          //   label: '操作',
          //   width: 280,
          //   align: 'center',
          //   resizable: false,
          //   slot: 'action',
          //   fixed: 'right'
          // }
        ],
        dictList: [],
        radio: null,
        current: null,
        curNodeData: ''
      };
    },

    methods: {
      init() {},
      onDone(res) {
        console.log(res);
      },
      handleClose() {
        this.$emit('update:linkParentDialogFlag', false);
      },
      selected() {
        this.$emit('linkParent', this.current);
        this.handleClose();
      },
      reload(where) {
        console.log(where);
        this.$refs.table.reload({ pageNum: 1, where });
        // this.$refs.table.reRenderTable();
      },
      handleNodeClick(data) {
        this.params.type = data.id;
        this.reload({ type: data.id });
      },
      cellClick(row) {
        console.log('选择');
        this.current = row;
        this.radio = row.id;
      },
      async getDictList(code) {
        let { data: res1 } = await getByCode('pro_projects_status');
        localStorage.setItem('pro_projects_status', JSON.stringify(init(res1)));

        let { data: res2 } = await getByCode('pro_projects_type');
        localStorage.setItem('pro_projects_type', JSON.stringify(init(res2)));

        let { data: res3 } = await getByCode('pro_projects_budget_unit');
        localStorage.setItem(
          'pro_projects_budget_unit',
          JSON.stringify(init(res3))
        );

        // this.dictList[code] = res.map((item) => {
        //   let values = Object.keys(item);
        //   return {
        //     value: values[0],
        //     label: item[values[0]]
        //   };
        // });

        function init(data) {
          return data.map((item) => {
            let values = Object.keys(item);
            return {
              value: values[0],
              label: item[values[0]]
            };
          });
        }
      },
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        console.log(this.rootId);

        if (this.rootId) {
          console.log(this.parentId);

          await this.getTreeList();
          console.log();

          this.$nextTick(() => {
            this.$refs.treeListRef.$refs.tree.setCurrentKey(this.parentId);
          });

          // this.$refs.treeListRef.setCurrentKey(this.parentId)
        }
        console.log(this.rootId);

        this.$refs.treeListRef.$refs.tree.setCurrentKey(this.rootId);

        return projectsPageAPI({
          pageNum: page,
          size: limit,
          ...this.params,
          ...where
        });
        return this.tableDataApi({
          // pageNum: page,
          // size: limit,
          // parentId: parent?.id ?? '0',
          // // parentId:this.parentId,
          ...this.params
          // type: this.treeId
        });
      },
      async getTreeList() {
        const res = await this.treeApi(this.treeApiCode);
        this.treeList = res;
        this.rootId = res[0].id;
        this.params = { type: this.rootId };
      }
    },

    created() {
      this.getTreeList();
      this.getDictList();
      // this.treeList();
      console.log(this.parentId);
      // this.radio=this.parentId
      // 这里以后可能要带出选择的项，应该是后端返回的数据列表的数据中带一个page的字段，每个子项目在哪个页
    },

    mounted() {}
  };
</script>

<style lang="scss" scoped></style>