xinhuaqujiaoyujuPCOA/src/components/files/option.vue

<template>
    <div style="padding: 0 30px">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px">
              <el-form-item label="档案归属" prop="documentType">
                <el-input v-model="form.deptId" v-show="false"></el-input>
                  <el-input title="选择归属部门" v-model="form.archivesType" placeholder="选择归属部门" prop="avtiveSend" :disabled="true">
                    <template slot="append">
                      <el-button
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleSelectDept">
                        选择部门
                      </el-button>
                    </template>
                  </el-input>
              </el-form-item>
              <el-form-item label="档案名称" prop="archivesName">
                <el-input v-model="form.archivesName" placeholder="请输入档案名称" />
              </el-form-item>
              <el-form-item label="档案actkey" prop="actkey">
                <el-input v-model="form.actkey" placeholder="请输入档案名称" />
              </el-form-item>
              <el-form-item label="档案id" prop="taskid">
                <el-input v-model="form.taskId" placeholder="请输入档案名称" />
              </el-form-item>
              <el-form-item label="流程名称" prop="taskName">
                <el-input v-model="form.taskName" placeholder="请输入流程名称" />
              </el-form-item>
              <el-button type="primary" @click="submit()">归档</el-button>
            </el-form>
      <el-dialog :title="tctitle" :visible.sync="deptOpen" width="20%" append-to-body style="size: 30px">
        <el-tree
          :data="deptOptions"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          default-expand-all
          @node-click="handleNodeClick"
          empty-text="加载中，请稍后"
          :props="defaultProps"
        ></el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="getDeptAll">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>

      </el-dialog>
    </div>
</template>

<script>
  import { addArchives } from "@/api/system/archives/archives.js";
  import { listDept } from "@/api/system/archives/column.js";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: 'option',
    components: {
      Treeselect
    },
    props:['optiontitle','optionactkey','optionid','optionName'],
    data(){
      return{
        depid: [],
        depname: [],
        deptOpen:false,
        // 部门树选项
        deptOptions: [],
        defaultProps: {
          children: "children",
          label: "deptName"
        },
        doc:[],
        options:[],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      }
    },
    created() {
      this.getList();
      this.option();
    },
    methods:{

      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.leabel.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        console.log(data)
        if(data.children.length == 0 ){
          this.form.deptId = data.deptId;
          this.form.parentId = data.parentId;
          this.form.archivesType = data.deptName;
        }else{
          return false
        }

      },

      option(){
        this.form.archivesName = this.optiontitle;
        this.form.actkey = this.optionactkey;
        this.form.taskId = this.optionid;
        this.form.taskName=this.optionName;
      },

      /** 查询文档列表 */
      getList() {
        this.loading = true;
        listDept(this.queryParams).then(response => {
          console.log(response.data)
          this.deptOptions = this.handleTree(response.data, "deptId");
          console.log(this.deptOptions)
          // this.doc = this.handleTree(response.data, "deptId");
          this.loading = false;
        });
      },
      submit(){

        addArchives(this.form).then(response => {
            this.msgSuccess("成功");
        });
      },
      getDeptAll(){
        this.deptOpen = false;
      },
      cancel() {
        this.$emit('getList');
        this.contentOpen = false;
        this.deptOpen = false;
        this.reset();

      },
      // 表单重置
      reset() {
        this.form = {
          everyone: undefined,
        };
        this.resetForm("form");
      },
      handleSelectDept() {
        this.deptOpen = true;
      },
    }
  }
</script>

<style scoped>

</style>