wt_project_web_bak/src/views/home/component/pro_relation.vue

<template>
  <div>
    <!--    项目关联-->
    <el-dialog v-model='showRelation'
               append-to-body
               center
               title="关联子项目"
               width="65%"
               @close="close"
    >
      <avue-crud ref="crud"
                 v-model="form"
                 v-model:page="page"
                 :before-open="beforeOpen"
                 :data="data"
                 :option="option"
                 :permission="permissionList"
                 :table-loading="loading"
                 class="curd"
                 @row-del="rowDel"
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 @refresh-change="refreshChange"
                 @on-load="onLoad">
      </avue-crud>
    </el-dialog>
    <!--    新增关联项目-->
    <el-dialog v-model='showAdd'
               append-to-body
               center
               title="新增关联项目"
               width="65%">
      <div class="flex flex-col">
        <el-input
            v-model="keyWords"
            clearable
            placeholder="项目信息快速搜索"
            prefix-icon="Search"
            @keydown="searchPro"
        />
      </div>
      <div class="hide-scrollbar full-width" style="height: 30vh;overflow-x: scroll">
        <!--        <div v-if='attaches.length === 0' class='full-width flex flex-center '>-->
        <!--          <el-empty image-size='100'/>-->
        <!--        </div>-->
        <div class="flex flex-justify-between mt-20 flex-center">
          <span class="bold font-15 grey ml-5 ">搜索结果</span>
        </div>
        <el-divider/>
        <div class="flex flex-center flex-justify-between mt-5" v-for="item in proList" :key="item.id">
          <span class="bold">{{ item.name }}</span>
          <baseButton icon="Lock" title="关联" type="0" width="60" @click="connectProject(item)"/>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import baseButton from '@/components/base-button.vue'
import { ElMessageBox } from 'element-plus'

export default {
  name: 'pro_relation',
  components: { baseButton },
  props: {
    showRelation: {
      type: Boolean,
      default: false
    },
    projectId: ''
  },
  watch: {
    showRelation: {
      handler (val) {
        console.log(val)
      },
      immediate: true
    }
  },
  data () {
    return {
      showAdd: false,
      data: [],
      form: {},
      option: {
        refreshBtn: false,
        tip: false,
        columnBtn: false,
        searchShow: true,
        editBtn: true,
        editBtnText: '解绑',
        editBtnIcon: 'Unlock',
        addBtn: true,
        delBtn: false,
        border: true,
        index: true,
        align: 'center',
        viewBtn: true,
        viewBtnText: '详情',
        menuWidth: 320,
        dialogClickModal: false,
        column: [
          {
            label: '项目名称',
            prop: 'name',
            addDisplay: false,
            editDisplay: false
          }]
      },
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      keyWords: '',
      proList: []
    }
  },
  methods: {
    close () {
      this.$emit('close')
    },
    onLoad (query = {}) {
      this.loading = true
      this.$api.project.childrenList({ parentId: this.projectId }).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.data = res.data.childrenList
          this.page.total = res.data.total
          this.$emit('success', this.page.total)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    beforeOpen (done, type) {
      if (['edit'].includes(type)) {
        ElMessageBox.confirm(
          '点击确定将解除项目绑定关系?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then((res) => {
            console.log(res)
            this.$api.project.removeContact({ id: this.form.id }).then(res => {
              if (res.code === 200) {
                this.onLoad()
                this.$message.success(res.msg)
              } else {
                this.$message.error(res.msg)
              }
            })
          })
          .catch(() => {
          })
      } else if (type === 'view') {
        this.$router.push({
          path: '/home/pro_detail',
          query: { id: this.form.id }
        })
      } else if (type === 'add') {
        this.showAdd = true
        this.showRelation = false
      }
    },
    currentChange (currentPage) {
      this.page.current = currentPage
    },
    sizeChange (pageSize) {
      this.page.size = pageSize
    },
    refreshChange () {
      this.onLoad()
    },
    rowDel (row) {
      this.$confirm('确定删除选择的项目?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$api.project.projectRemove({ ids: row.id }).then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.onLoad()
            } else {
              this.$message.error(res.msg)
            }
          })
        })
    },
    searchPro () {
      const data = { projectName: this.keyWords }
      this.$api.project.projectList(this.page.current, this.page.size, data).then(res => {
        if (res.code === 200) {
          this.proList = res.data.records.filter(sub => sub.id !== this.projectId)
        }
      })
    },
    connectProject (item) {
      const params = {
        projectId: this.projectId,
        childrenIdList: [item.id]
      }
      this.$api.project.proContact(params).then(res => {
        if (res.code === 200) {
          this.showAdd = false
          this.onLoad()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>