sstt-archives-web/src/views/organize/components/bindCatalog.vue

<template>
  <div>
    <xy-dialog ref="dialog" :width="40" :is-show.sync="isShow" :type="'form'" :title="'目录授权'" :form="form"
      :rules='rules' @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>组织类型：
          </div>
          <div class="xy-table-item-content">
            {{form.name}}
          </div>
        </div>
      </template>
      <template v-slot:catalog_ids>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>授权目录：
          </div>
          <div class="xy-table-item-content">
            <el-tree v-if="isShow" @check="getSelectedNodes" :data="catalogList" show-checkbox default-expand-all node-key="id"
              ref="tree" highlight-current :props="defaultProps">
            </el-tree>
          </div>
        </div>
      </template>
    </xy-dialog>

  </div>
</template>

<script>
  import {
    save,
    show,
    index
  } from "@/api/system/baseForm.js"
  import {
    deepCopy,
    isNull
  } from "@/utils";
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        id: '',
        catalogList: [],
        catalogListBefore:[],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        table_name: 'organize_types',
        form: {
          name: '',
          catalog_ids: [],
          catalog_names:''
        },
        rules: {}
      }
    },
    created() {
      this.getCatalogList()
    },
    methods: {
      async getCatalogList() {
        const res = await index({
          page_size: 999,
          page: 1,
          sort_type: 'ASC',
          sort_name: 'sort',
          table_name: 'catalogs',
        })
        if (res.data.length > 0) {
          this.catalogListBefore = this.base.deepCopy(res.data)
          this.catalogList = this.base.buildTree(res.data)
        }
      },
      getSelectedNodes() {
        const selectedItems = this.$refs.tree.getCheckedKeys()
        this.form.catalog_ids = selectedItems
        let names = []
        this.catalogListBefore.map(item=>{
          if(selectedItems.includes(item.id)){
            names.push(item.name)
          }
        })
        this.form.catalog_names = names.join(",")
        console.log("selectedItems",this.catalogListBefore, selectedItems,this.form.catalog_names)
      },
      submit() {
        console.log("this.form", this.form)
        save({
          table_name: this.table_name,
          ...this.form
        }).then(res => {
          this.$message({
            type: 'success',
            message: '授权成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      },

      getDetail() {
        show({
          id: this.id,
          table_name: this.table_name,
        }).then(res => {
          this.form = this.base.requestToForm(res,this.form)

          // this.$refs.tree.setCurrentKey(this.res.catalog_ids);
          if(res.catalog_ids){
            this.$refs.tree.setCheckedKeys(res.catalog_ids,false)
          }
          // setCurrentKey
          console.log("this.form", this.form)
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          this.getDetail()
        } else {
          this.id = ''
          this.form = {
            name: '',
            catalog_ids: [],
            catalog_names:''
          }
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .description,
  ::v-deep .name,
  ::v-deep .catalog_ids {
    flex-basis: 100%;
  }

  ::v-deep .catalog_ids .xy-table-item {
    align-items: flex-start;
  }
</style>