soc_web/src/views/core/accessPlan/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--机构数据-->
      <el-col :span="4" :xs="24">
                  <org-tree v-model="queryParams.orgId" @defaultKey="getDefaultKey" @defaultOrg="getDefaultOrg" @checkChange="checkChange"
                    @click="clickTreeNode"></org-tree>
      </el-col>
      <!--搜索栏-->

      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
                 <el-form-item label="计划名称" prop="planName">
            <el-input v-model="queryParams.planName" placeholder="请输入计划名称" maxlength="50" clearable
                      @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item label="机构类型" prop="orgType">
            <el-select style="width: 100%;" v-model="queryParams.orgType" placeholder="请选择" @change="changeSelect">
              <el-option v-for="dict in dict.type.sys_org_type" :key="dict.value" :label="dict.label"
                         :value="`${dict.value}`"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="调阅角色" prop="roleId">
            <el-select v-model="queryParams.roleId" placeholder="请选择">
              <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="调阅周期" prop="planCycle">
            <el-select style="width: 100%;" v-model="queryParams.planCycle" placeholder="请选择">
              <el-option v-for="dict in dict.type.sys_access_cycle" :key="dict.value" :label="dict.label"
                         :value="`${dict.value}`"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计划状态" prop="planStatus">
            <el-select style="width: 100%;" v-model="queryParams.planStatus" placeholder="请选择">
              <el-option v-for="dict in dict.type.plan_status" :key="dict.value" :label="dict.label"
                         :value="`${dict.value}`"></el-option>
            </el-select>
          </el-form-item>

        

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                       v-hasPermi="['core:accessPlan:list']">搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                 v-hasPermi="['core:accessPlan:add']"  v-if="check==true" >新增
            </el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table border
                  height="600"
                  size="small"
                  v-loading="loading" :data="planList" row-key="id" :tree-props="{ children: 'children' }">
          <el-table-column prop="index" label="序号" width="80"></el-table-column>
          <el-table-column width="140" label="计划名称" align="center" prop="planName"/>
          <el-table-column width="140" label="创建机构" align="center" prop="orgName"/>
          <el-table-column label="机构类型" align="center" key="orgType" prop="orgType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_org_type" :value="scope.row.orgType"/>
            </template>
          </el-table-column>
          <el-table-column label="调阅角色" align="center" prop="roleName"/>

          <el-table-column label="调阅周期" align="center" key="planCycle" prop="planCycle" width="80">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_access_cycle" :value="scope.row.planCycle"/>
            </template>
          </el-table-column>
          <el-table-column label="调阅频次" align="center" prop="planFrequency"/>

          <el-table-column label="计划状态" align="center" key="planStatus" prop="planStatus" width="80">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.plan_status" :value="scope.row.planStatus"/>
            </template>
          </el-table-column>
          <!-- <el-table-column label="修改人" align="center" prop="updateBy"/>
          <el-table-column label="修改时间" align="center" prop="updateTime"/> -->
          <el-table-column label="备注" align="center" prop="description"/>
          <el-table-column label="操作" fixed="right" width="120" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-if="scope.row.parentId==null && check==true"
                         v-hasPermi="['core:accessPlan:edit','core:accessPlan:query']">编辑
              </el-button>
              <el-button size="mini" type="text" v-if="scope.row.isDistribute == 0 && scope.row.planStatus==0" icon="el-icon-arrow-down"
                         @click="handDistribute(scope.row)" v-hasPermi="['core:accessPlan:add']">下发
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-if="scope.row.parentId==null && check==true"
                         v-hasPermi="['core:accessPlan:remove']">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"/> -->
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"/>
      </el-col>

    </el-row>

    <!-- 添加或修改监控调阅计划对话框 -->
    <DialogCom :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="计划名称" prop="planName">
          <el-input v-model="form.planName" placeholder="请输入计划名称" maxlength="50"/>
        </el-form-item>

        <el-form-item label="机构类型" prop="orgType">
          <el-select style="width: 100%;" v-model="form.orgType" placeholder="请选择" @change="changeSelect">
            <el-option v-for="dict in dict.type.sys_org_type" :key="dict.value" :label="dict.label"
                       :value="`${dict.value}`"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调阅周期" prop="planCycle">
          <el-select style="width: 100%;" v-model="form.planCycle" placeholder="请选择">
            <el-option v-for="dict in dict.type.sys_access_cycle" :key="dict.value" :label="dict.label"
                       :value="`${dict.value}`"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="startTime" v-if="form.planCycle == 0" label="开始日期">
          <el-date-picker style="width: 100%;" v-model="form.startTime" @change="startDateChanged" :picker-options="startDatepickerOptions"
                          align="right" type="date" placeholder="选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="endTime" v-if="form.planCycle == 0" label="结束日期">
          <el-date-picker style="width: 100%;" v-model="form.endTime" :picker-options="endDatepickerOptions" align="right" type="date"
                          placeholder="选择结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="调阅角色" prop="roleId">
          <el-select style="width: 100%;" v-model="form.roleId" placeholder="请选择" @change="changeSelectOrgType">
            <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调阅频次" prop="planFrequency">
          <el-input type="number" oninput="if(value<=0)value=null;value=parseInt(value)"
                    v-model.number="form.planFrequency" placeholder="请输入调阅频次"/>
        </el-form-item>
        <el-form-item label="计划状态" prop="planStatus">
          <el-radio-group v-model="form.planStatus">
            <el-radio v-for="dict in dict.type.plan_status" :key="dict.value" :label="dict.value">{{ dict.label
              }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="description">
          <el-input v-model="form.description" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </DialogCom>
  </div>
</template>

<script>
  import {listPlan, getPlan, delPlan, addPlan, updatePlan, distribute} from "@/api/core/accessPlan";
  import {listRole, findRoleByType, getRole, allRole} from "@/api/system/role";
  import tableList from "@/mixins/tableList";
  import orgTree from "@/components/orgTree";
  import {deptTreeSelect} from "@/api/system/public";
  import KFileUpload from "@/components/K-FileUpload/index.vue";

  export default {
    name: "Plan",
    dicts: ['sys_org_type', 'sys_access_cycle', 'sys_normal_disable', 'plan_status'],
    components: {
      orgTree
    },
    data() {
      return {
        startDatepickerOptions: {
          disabledDate(time) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            return time.getTime() < date;
          },
        },
        endDatepickerOptions: {
          disabledDate: this.disabledDate
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        names: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 监控调阅计划表格数据
        planList: [],
        check:null,
        //角色列表
        roleList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          planName: null,
          orgId: null,
          orgPath: null,
          orgName: null,
          orgType: null,
          roleId: null,
          planCycle: null,
          planFrequency: null,
          planStatus: null,
          description: null,
          isDeleted: null,
          isDistribute: null,
          checkSub: true
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          planName: [
            {required: true, message: '请输入计划名称', trigger: 'change'},
          ],
          orgType: [
            {required: true, message: '请选择机构类型', trigger: 'change'},
          ],
          planCycle: [
            {required: true, message: '请选择调阅周期', trigger: 'change'},
          ],
          roleId: [
            {required: true, message: '请选择调阅角色', trigger: 'change'},
          ],
          planFrequency: [
            {required: true, message: '请选择调阅频次', trigger: 'change'},
          ],
        }

      };
    },
    created() {
      // this.getList();
      // listRole().then(response => {
      //   this.roleList = response.rows;
      // });
      allRole().then(response => {
        this.roleList = response.data;
      });
    },
    methods: {
      getPageIndex($index) {
        //表格序号
        return (
          (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
        );
      },
      /** 查询监控调阅计划列表 */
      getList() {
        this.loading = true;
        listPlan(this.queryParams).then(response => {
          this.planList = response.data.rows;
          this.check=response.check;
          this.total = response.data.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          planName: null,
          orgId: null,
          orgPath: null,
          orgName: null,
          orgType: null,
          roleId: null,
          planCycle: null,
          planFrequency: null,
          planStatus: "0",
          createTime: null,
          createBy: null,
          updateTime: null,
          updateBy: null,
          description: null,
          isDeleted: null
        };
        this.resetForm("form");
      },
      getDefaultKey(key) {
        this.queryParams.orgId = key;
        this.getList();
      },
      //单选框状态改变
      checkChange(state) {
        this.queryParams.checkSub = state;
        this.handleQuery();
      },
      startDateChanged(time) {

        if (this.form.startTime > this.form.endTime) {
          this.form.endTime = this.form.startTime;
        }
      },
      disabledDate(time) {
        //小于开始日期禁止选择
        let startTime = new Date();
        startTime.setTime(startTime.getTime() - 3600 * 1000 * 24);
        if (this.form.startTime) {

          startTime = new Date(this.formatTime(this.form.startTime, 'YYYY-MM-DD'));
          startTime.setTime(startTime.getTime() - 3600 * 1000 * 24);
        }
        return time.getTime() < new Date(startTime).getTime()
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      // 节点单击事件
      clickTreeNode(data) {
        //this.initPlanRoleList();
        this.queryParams.orgId = data.id;
        this.handleQuery();
      },
      changeSelectOrgType(val) {
        getRole(val).then(response => {
          this.form.orgType = response.data.orgType;
        })
      },
      changeSelect(val) {
        findRoleByType(val).then(response => {
          this.roleList = response;
          this.queryParams.roleId=null;
          this.form.roleId=null;
        })
      },
      /** 查询机构树数据 */
      getDeptTree() {
        deptTreeSelect().then(response => {
          this.deptOptions = response.data;

          this.handleQuery();
        });
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
        allRole().then(response => {
        this.roleList = response.data;
      });
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.names = selection.map(item => item.planName)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加监控调阅计划";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getPlan(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改监控调阅计划";
          findRoleByType(this.form.orgType).then(response => {
          this.roleList = response;
        })
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updatePlan(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addPlan(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        const names = row.planName || this.names;
        this.$modal.confirm('是否确认删除监控调阅计划"' + names + '"的数据项？').then(function () {
          return delPlan(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      handDistribute(row) {
        this.$modal.confirm('是否确认下发监控调阅计划"' + row.planName + '"的数据项？').then(function () {
          return distribute(row.id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("下发成功");
        }).catch(() => {
        });

      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/plan/export', {
          ...this.queryParams
        }, `plan_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>