yxk-electronic-archives/src/views/prearchiveLibrary/module/batchFile.vue

<template>
  <div>
    <!-- 批量成件 -->
    <el-dialog class="batch-form" append-to-body :modal-append-to-body="false" :close-on-click-modal="false" :before-close="handleClose" :visible="batchVisible" title="批量成件">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="130px">
          <el-form-item label="对应规则" prop="rules">
            <el-select v-model="form.ruleName" placeholder="请选择" style="width: 225px;" @change="selectRules">
              <el-option
                v-for="item in rulesOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="归档范围" prop="scope">
            <el-input v-model="form.scope" type="text" readonly>
              <i slot="suffix" class="el-input__icon iconfont icon-sousuo" @click="selectScope" />
            </el-input>
          </el-form-item>
          <el-form-item label="源分类" prop="documentName">
            <el-input v-model="form.documentName" type="text" disabled />
          </el-form-item>
          <el-form-item label="目标门类" prop="categoryId">
            <treeselect
              v-model="form.categoryId"
              :options="categoryTree"
              flat
              :multiple="false"
              :normalizer="normalizer"
              placeholder="请选择目标门类（整理库/管理库门类）"
              @select="handleSelectCategory"
            />
          </el-form-item>
        </el-form>
        <div class="corres-field-main">
          <div class="corres-field-list corres-field-left">
            <div class="corres-field-title">
              <p>字段取值</p>
            </div>
            <div class="field-list">
              <div v-for="(item, index) in selectStatus" :key="index" class="field-item">
                <el-select :key="index" v-model="item.fiedType">
                  <el-option
                    v-for="v in fiedOption"
                    :key="v.value"
                    :label="v.label"
                    :value="v.value"
                  />
                </el-select>
              </div>
            </div>
          </div>
          <div class="corres-field-list corres-field-middle">
            <div class="corres-field-title">
              <p>源分类（文件库-文件表）</p>
              <span>{{ form.documentName }}</span>
            </div>
            <div class="field-list">
              <div v-for="(item, index) in selectStatus" :key="index" class="field-item">
                <el-select v-if="item.mode" :key="index" v-model="item.value" @change="selectChange(index)">
                  <el-option value="">请选择</el-option>
                  <el-option
                    v-for="v in options"
                    :key="v.id"
                    :label="v.fieldCnName"
                    :value="v.fieldCnName"
                  />
                </el-select>
                <p v-if="!item.mode" @click="textMode(index)">
                  {{ item.value }}
                </p>
                <div v-if="!item.mode" class="field-state"><span :class="item.isDisplay ? 'is-select' : 'is-hide'">{{ item.isDisplay ? '显示': '隐藏' }}</span></div>
              </div>
            </div>
          </div>
          <div class="corres-field-list corres-field-right">
            <div class="corres-field-title">
              <p>目标门类（整理库/管理库-文件表）</p>
              <span>{{ selectedCategoryName }}</span>
            </div>
            <div class="field-list">
              <div v-for="(item,index) in targetData" :key="index" class="field-item">
                <p>{{ item.fieldCnName }}</p>
                <div class="field-state"><span :class=" item.isDisplay ? 'is-select' : 'is-hide'">{{ item.isDisplay ? '显示': '隐藏' }}</span></div>
              </div>
            </div>
          </div>
          <div v-if="selectStatus.length === 0" class="empty-data" />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="batchVisible = false">取消</el-button>
          <el-button type="primary" @click="batchVisible = false">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <ScopeModule ref="scopeModule" @getScope="hanleScopeSelect" />
  </div>
</template>

<script>
import { FetchInitFieldMateList, FetchInitFieldMate } from '@/api/system/fieldMate'
import { FetchDocumentMenu } from '@/api/system/fileLibrary/fileLibrary'
import { FetchCategoryMenu } from '@/api/system/category/category'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import fieldData from './data.json'
import ScopeModule from './scope'
export default {
  name: 'BatchFile',
  components: { Treeselect, ScopeModule },
  data() {
    return {
      batchVisible: false,
      rulesOptions: [],
      categoryTree: [],
      form: {
        ruleName: null,
        scope: null,
        documentId: null,
        documentName: '',
        categoryId: null
      },
      selectedCategoryName: null,
      scopeVisible: false,
      loadSource: [],
      rules: {
        categoryId: [
          { required: true, message: '请选择档案门类', trigger: 'change' }
        ]
      },
      fiedOption: [],
      fiedType: null,
      selectStatus: [],
      selectOptions: [],
      targetData: [],
      leftLoading: false,
      rightLoading: false
    }
  },
  created() {
    this.getInitFieldMateList()
    this.getCategoryDataTree()
    this.getDocumentDataTree()
  },
  mounted() {

  },
  methods: {
    // 对应规则
    getInitFieldMateList() {
      FetchInitFieldMateList().then(res => {
        this.rulesOptions = res.content.map(item => {
          const json = {}
          json.label = item.rule_name
          json.value = item.id
          return json
        })
      })
    },
    getInitDetail(id) {
      FetchInitFieldMate({ 'id': id }).then((res) => {
        console.log(res)
        this.form.documentName = res.documentName
        this.selectedCategoryName = res.categoryName
        this.form.categoryId = res.fieldMateDetails[0].pid.categoryId.pid
      }).catch(err => {
        console.log(err)
      })
    },
    selectRules(val) {
      this.getInitDetail(val)
      this.selectStatus = []
      this.targetData = fieldData
      // this.targetData.forEach((item, index) => {
      //   this.selectStatus.push({ mode: true, value: '' })
      // })
    },
    filterData(data) {
      return data.filter(node => {
        if (node.children && node.children.length > 0) {
          node.children = this.filterData(node.children) // 递归处理子节点
        }
        return node.isType !== 3 // 过滤掉isType为3的节点
      })
    },
    // 目标门类
    getCategoryDataTree() {
      FetchCategoryMenu().then(res => {
        this.categoryTree = this.filterData(res)
      })
    },
    getDocumentDataTree() {
      FetchDocumentMenu().then(res => {
        this.documentTree = this.filterData(res)
      })
    },
    handleSelectCategory(val) {
      this.selectedCategoryName = val.cnName
    },
    // 归档范围选择
    selectScope() {
      this.$refs.scopeModule.scopeVisible = true
    },
    hanleScopeSelect(val) {
      if (val.length !== 0) {
        this.form.scope = val[0].scopeName
        console.log('val', val)
      }
    },
    selectChange(index) {
      this.options.forEach((item) => {
        if (item.fieldCnName === this.selectStatus[index].value) {
          this.selectStatus.splice(index, 1, { mode: false, value: this.selectStatus[index].value, field: item, isDisplay: item.isDisplay })
        }
      })
    },
    textMode(index) {
      this.selectStatus.splice(index, 1, { mode: true, value: this.selectStatus[index].value, field: null, isDisplay: this.selectStatus[index].isDisplay })
    },
    handleClose(done) {
      this.batchVisible = false
      done()
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.cnName,
        children: node.children,
        isDisabled: node.isType !== 2
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/prearchive-library.scss";
.batch-form{
  ::v-deep .el-dialog{
    width: 828px !important;
  }
  .corres-field-left{
    width: 146px;
    .corres-field-title{
      p{
        padding-top: 0 !important;
        line-height: 60px;
      }
    }
    .field-list{
      .field-item{
        width: 146px;
        ::v-deep .el-select{
          width: 145px !important;
          border-right: none;
        }
      }
    }
  }
  .corres-field-middle{
    .field-list{
      .field-item{
        width: 315px;
        ::v-deep .el-select{
          width: 314px !important;
          border-right: none;
        }
      }
    }
  }
}
.corres-field-main{
  position: relative;
}
.empty-data{
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  background: url('~@/assets/images/system/zwsj.png') no-repeat center center #fff;
  background-size: 282px 182px;
}
</style>