index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504
  1. <template>
  2. <div class="app-container">
  3. <el-row :gutter="10">
  4. <!--机构数据-->
  5. <!-- <el-col :span="4" :xs="24">
  6. <org-tree v-model="queryParams.orgId" @defaultKey="getDefaultKey" @defaultOrg="getDefaultOrg" @checkChange="checkChange"
  7. @click="clickTreeNode" :defaultCheckSub="false" hangsheTree></org-tree>
  8. </el-col> -->
  9. <!--搜索栏-->
  10. <el-col :span="24" :xs="24">
  11. <div class="main-right-box">
  12. <div class="main-search-box">
  13. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
  14. <el-form-item label="行社名称">
  15. <org-tree
  16. v-model="queryParams.orgId" @defaultKey="getDefaultKey" @defaultOrg="getDefaultOrg" @checkChange="checkChange"
  17. @click="clickTreeNode" :defaultCheckSub="false" hangsheTree
  18. ></org-tree>
  19. </el-form-item>
  20. <el-form-item label="任务名称" prop="planName">
  21. <el-input v-model="queryParams.planName" placeholder="请输入关键字" maxlength="50" clearable @keyup.enter.native="handleQuery"/>
  22. </el-form-item>
  23. <el-form-item label="机构类型" prop="orgType">
  24. <el-select style="width: 100%;" v-model="queryParams.orgType" placeholder="请选择机构类型" @change="changeSelect">
  25. <el-option v-for="dict in dict.type.sys_org_type" :key="dict.value" :label="dict.label"
  26. :value="`${dict.value}`"></el-option>
  27. </el-select>
  28. </el-form-item>
  29. <el-form-item label="调阅人员" prop="roleId">
  30. <el-select v-model="queryParams.roleId" placeholder="请选择用户角色">
  31. <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
  32. </el-select>
  33. </el-form-item>
  34. <el-form-item label="任务周期" prop="planCycle">
  35. <el-select style="width: 100%;" v-model="queryParams.planCycle" placeholder="请选择任务周期">
  36. <el-option v-for="dict in dict.type.sys_access_cycle" :key="dict.value" :label="dict.label"
  37. :value="`${dict.value}`"></el-option>
  38. </el-select>
  39. </el-form-item>
  40. <el-form-item label="任务状态" prop="planStatus">
  41. <el-select style="width: 100%;" v-model="queryParams.planStatus" placeholder="请选择任务状态">
  42. <el-option v-for="dict in dict.type.edu_plan_status" :key="dict.value" :label="dict.label"
  43. :value="`${dict.value}`"></el-option>
  44. </el-select>
  45. </el-form-item>
  46. </el-form>
  47. <el-row :gutter="10">
  48. <el-col :span="1.5">
  49. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
  50. v-hasPermi="['core:accessPlan:list']">搜索
  51. </el-button>
  52. </el-col>
  53. <el-col :span="1.5">
  54. <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  55. </el-col>
  56. <el-col :span="1.5">
  57. <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
  58. v-hasPermi="['core:accessPlan:add']" v-if="check==true" >新增任务
  59. </el-button>
  60. </el-col>
  61. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  62. </el-row>
  63. </div>
  64. <el-table border
  65. height="600"
  66. size="small"
  67. v-loading="loading" :data="planList" row-key="id">
  68. <el-table-column label="序号" type="index" align="center" width="80">
  69. <template slot-scope="scope">
  70. <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
  71. </template>
  72. </el-table-column>
  73. <el-table-column width="140" label="任务名称" align="center" prop="planName"/>
  74. <el-table-column width="140" label="创建机构" align="center" prop="orgName"/>
  75. <el-table-column width="140" label="行社名称" align="center" prop="organization"/>
  76. <el-table-column label="机构类型" align="center" key="orgType" prop="orgType">
  77. <template slot-scope="scope">
  78. <dict-tag :options="dict.type.sys_org_type" :value="scope.row.orgType"/>
  79. </template>
  80. </el-table-column>
  81. <el-table-column label="调阅人员" align="center" prop="roleName"/>
  82. <el-table-column label="任务周期" align="center" key="planCycle" prop="planCycle" >
  83. <template slot-scope="scope">
  84. <dict-tag :options="dict.type.sys_access_cycle" :value="scope.row.planCycle"/>
  85. </template>
  86. </el-table-column>
  87. <el-table-column label="任务次数" align="center" prop="planFrequency"/>
  88. <el-table-column label="任务状态" align="center" key="planStatus" prop="planStatus" >
  89. <template slot-scope="scope">
  90. <dict-tag :options="dict.type.edu_plan_status" :value="scope.row.planStatus"/>
  91. </template>
  92. </el-table-column>
  93. <!-- <el-table-column label="备注" align="center" prop="description"/> -->
  94. <el-table-column label="操作" fixed="right" width="220px" align="left" class-name="small-padding fixed-width">
  95. <template slot-scope="scope">
  96. <el-button size="mini" type="text" icon="el-icon-arrow-down" v-if="scope.row.parentId==null&& scope.row.orgId==isEdit&&scope.row.isDistribute == 0 && (scope.row.planStatus==0||scope.row.planStatus==2)"
  97. @click="handDistribute(scope.row)" v-hasPermi="['core:accessPlan:add']">下发
  98. </el-button>
  99. <el-button size="mini" type="text" icon="el-icon-top-left" v-if="scope.row.orgId==isEdit&&scope.row.isDistribute == 1 && scope.row.planStatus==1&&scope.row.parentId==null"
  100. @click="handWithdraw(scope.row)" >撤回
  101. </el-button>
  102. <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleUpdate(scope.row)" v-if="scope.row.orgId==isEdit&&check==true"
  103. v-hasPermi="['core:accessPlan:edit','core:accessPlan:query']">编辑
  104. </el-button>
  105. <el-button size="mini" type="text" v-if="scope.row.parentOrgId==isEdit&&scope.row.parentId==null && check==true" icon="el-icon-delete" @click="handleDelete(scope.row)"
  106. v-hasPermi="['core:accessPlan:remove']">删除
  107. </el-button>
  108. </template>
  109. </el-table-column>
  110. </el-table>
  111. <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
  112. :limit.sync="queryParams.pageSize"
  113. @pagination="getList"/>
  114. </div>
  115. </el-col>
  116. </el-row>
  117. <!-- 添加或修改监控调阅计划对话框 -->
  118. <DialogCom :title="title" :visible.sync="open" width="500px" append-to-body>
  119. <el-form ref="form" :model="form" :rules="rules" label-width="100px">
  120. <el-form-item label="任务名称" prop="planName">
  121. <el-input v-model="form.planName" placeholder="请输入任务名称" maxlength="50" :disabled="form.isEdit"/>
  122. </el-form-item>
  123. <el-form-item label="机构类型" prop="orgType">
  124. <el-select style="width: 100%;" v-model="form.orgType" placeholder="请选择机构类型" @change="changeSelect">
  125. <el-option v-for="dict in dict.type.sys_org_type" :key="dict.value" :label="dict.label"
  126. :value="`${dict.value}`" :disabled="form.isEdit||form.isComplete"></el-option>
  127. </el-select>
  128. </el-form-item>
  129. <el-form-item label="调阅周期" prop="planCycle">
  130. <el-select style="width: 100%;" v-model="form.planCycle" placeholder="请选择调阅周期">
  131. <el-option v-for="dict in dict.type.sys_access_cycle" :key="dict.value" :label="dict.label"
  132. :value="`${dict.value}`" :disabled="form.isEdit||form.isComplete"></el-option>
  133. </el-select>
  134. </el-form-item>
  135. <el-form-item label="调阅人员" prop="roleId">
  136. <el-select style="width: 100%;" v-model="form.roleId" placeholder="请选择用户角色" @change="changeSelectOrgType">
  137. <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id" :disabled="form.isEdit||form.isComplete"></el-option>
  138. </el-select>
  139. </el-form-item>
  140. <el-form-item label="调阅次数" prop="planFrequency" v-if="form.isEdit==true">
  141. <el-input type="number" @change="numChange"
  142. v-model.number="form.planFrequency" placeholder="请输入调阅次数" :disabled="form.isComplete"/>
  143. </el-form-item>
  144. <el-form-item label="调阅次数" prop="planFrequency" v-if="form.isEdit==false||form.isEdit==null">
  145. <el-input type="number" :min="1" oninput="if(value<0)value=1"
  146. v-model.number="form.planFrequency" placeholder="请输入调阅次数" :disabled="form.isComplete"/>
  147. </el-form-item>
  148. <el-form-item label="立即生效" prop="immediately" v-if="form.planCycle!=0&&this.issue==null">
  149. <el-checkbox v-model="form.immediately" :disabled="form.isEdit||form.isComplete">
  150. 默认从下个周期生成任务,
  151. <br/>
  152. 勾选后从当前周期立即生成任务
  153. </el-checkbox>
  154. </el-form-item>
  155. <el-form-item prop="startTime" v-if="form.planCycle == 0" label="开始日期">
  156. <el-date-picker style="width: 100%;" v-model="form.startTime" @change="startDateChanged" :picker-options="startDatepickerOptions"
  157. align="right" type="date" placeholder="选择开始日期" :disabled="form.isEdit||form.isComplete">
  158. </el-date-picker>
  159. </el-form-item>
  160. <el-form-item prop="endTime" v-if="form.planCycle == 0" label="结束日期">
  161. <el-date-picker style="width: 100%;" v-model="form.endTime" :picker-options="endDatepickerOptions" align="right" type="date"
  162. placeholder="选择结束日期" :disabled="form.isEdit||form.isComplete">
  163. </el-date-picker>
  164. </el-form-item>
  165. <el-form-item label="备注" prop="description">
  166. <el-input v-model="form.description" type="textarea" placeholder="请输入备注" maxlength="200" :disabled="form.isEdit||form.isComplete"/>
  167. </el-form-item>
  168. </el-form>
  169. <div slot="footer" class="dialog-footer">
  170. <el-button type="primary" @click="submitForm">确 定</el-button>
  171. <el-button @click="cancel">取 消</el-button>
  172. </div>
  173. </DialogCom>
  174. </div>
  175. </template>
  176. <script>
  177. import {listPlan, getPlan, delPlan, addPlan, updatePlan, distribute,withdraw} from "@/api/core/accessPlan";
  178. import {listRole, findRoleByType, getRole, allRole} from "@/api/system/role";
  179. import tableList from "@/mixins/tableList";
  180. import orgTree from "@/components/orgTree/orgQuerySelector.vue";
  181. import {deptTreeSelect} from "@/api/system/public";
  182. import KFileUpload from "@/components/K-FileUpload/index.vue";
  183. export default {
  184. name: "Plan",
  185. dicts: ['sys_org_type', 'sys_access_cycle', 'sys_normal_disable', 'plan_status','is_full','edu_plan_status'],
  186. components: {
  187. orgTree
  188. },
  189. data() {
  190. return {
  191. startDatepickerOptions: {
  192. disabledDate(time) {
  193. const date = new Date();
  194. date.setTime(date.getTime() - 3600 * 1000 * 24);
  195. return time.getTime() < date;
  196. },
  197. },
  198. endDatepickerOptions: {
  199. disabledDate: this.disabledDate
  200. },
  201. // 遮罩层
  202. loading: true,
  203. // 选中数组
  204. ids: [],
  205. names: [],
  206. // 非单个停用
  207. single: true,
  208. // 非多个停用
  209. multiple: true,
  210. // 显示搜索条件
  211. showSearch: true,
  212. // 总条数
  213. total: 0,
  214. // 监控调阅计划表格数据
  215. planList: [],
  216. check:null,
  217. orgId:null,
  218. //角色列表
  219. roleList: [],
  220. // 弹出层标题
  221. title: "",
  222. // 是否显示弹出层
  223. open: false,
  224. // 查询参数
  225. queryParams: {
  226. pageNum: 1,
  227. pageSize: 10,
  228. planName: null,
  229. orgId: null,
  230. orgPath: null,
  231. orgName: null,
  232. orgType: null,
  233. roleId: null,
  234. planCycle: null,
  235. planFrequency: null,
  236. planStatus: null,
  237. description: null,
  238. isDeleted: null,
  239. isDistribute: null,
  240. checkSub: false
  241. },
  242. // 表单参数
  243. form: {
  244. isEdit:null,
  245. parentOrgId:null,
  246. isComplete:null,
  247. parentFrequency:null
  248. },
  249. isEdit:null,
  250. isComplete:null,
  251. // 表单校验
  252. rules: {
  253. planName: [
  254. {required: true, message: '请输入计划名称', trigger: 'change'},
  255. ],
  256. orgType: [
  257. {required: true, message: '请选择机构类型', trigger: 'change'},
  258. ],
  259. planCycle: [
  260. {required: true, message: '请选择调阅周期', trigger: 'change'},
  261. ],
  262. roleId: [
  263. {required: true, message: '请选择调阅角色', trigger: 'change'},
  264. ],
  265. planFrequency: [
  266. {required: true, message: '请选择调阅频次', trigger: 'change'},
  267. ],
  268. },
  269. initNum:null,
  270. issue:null
  271. };
  272. },
  273. created() {
  274. allRole().then(response => {
  275. this.roleList = response.data;
  276. });
  277. },
  278. methods: {
  279. numChange(value){
  280. if(value<=0)this.form.planFrequency = 0;
  281. if(value <= this.initNum) this.form.planFrequency = this.initNum;
  282. //value = parseInt(value);
  283. },
  284. getPageIndex($index) {
  285. //表格序号
  286. return (
  287. (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
  288. );
  289. },
  290. getDefaultOrg(org){
  291. this.orgName = org.name;
  292. },
  293. /** 查询监控调阅计划列表 */
  294. getList() {
  295. this.loading = true;
  296. listPlan(this.queryParams).then(response => {
  297. this.planList = response.data.rows;
  298. this.check=response.check;
  299. this.isEdit=response.isEdit;
  300. this.xf=response.xf;
  301. this.total = response.data.total;
  302. this.loading = false;
  303. });
  304. },
  305. // 取消按钮
  306. cancel() {
  307. this.open = false;
  308. this.reset();
  309. },
  310. // 表单重置
  311. reset() {
  312. this.form = {
  313. id: null,
  314. planName: null,
  315. orgId: null,
  316. orgPath: null,
  317. orgName: null,
  318. orgType: "4",
  319. roleId: "121",
  320. planCycle: "2",
  321. planFrequency: 1,
  322. planStatus: "0",
  323. immediately:false,
  324. createTime: null,
  325. createBy: null,
  326. updateTime: null,
  327. updateBy: null,
  328. description: null,
  329. isDeleted: null
  330. };
  331. this.resetForm("form");
  332. },
  333. getDefaultKey(key) {
  334. this.queryParams.orgId = key;
  335. this.getList();
  336. },
  337. //单选框状态改变
  338. checkChange(state) {
  339. this.queryParams.checkSub = state;
  340. this.handleQuery();
  341. },
  342. startDateChanged(time) {
  343. if (this.form.startTime > this.form.endTime) {
  344. this.form.endTime = this.form.startTime;
  345. }
  346. },
  347. disabledDate(time) {
  348. //小于开始日期禁止选择
  349. let startTime = new Date();
  350. startTime.setTime(startTime.getTime() - 3600 * 1000 * 24);
  351. if (this.form.startTime) {
  352. startTime = new Date(this.formatTime(this.form.startTime, 'YYYY-MM-DD'));
  353. startTime.setTime(startTime.getTime() - 3600 * 1000 * 24);
  354. }
  355. return time.getTime() < new Date(startTime).getTime()
  356. },
  357. /** 搜索按钮操作 */
  358. handleQuery() {
  359. this.queryParams.pageNum = 1;
  360. this.getList();
  361. },
  362. // 节点单击事件
  363. clickTreeNode(data) {
  364. //this.initPlanRoleList();
  365. this.queryParams.orgId = data.id;
  366. this.handleQuery();
  367. },
  368. changeSelectOrgType(val) {
  369. getRole(val).then(response => {
  370. this.form.orgType = response.data.orgType;
  371. })
  372. },
  373. changeSelect(val) {
  374. findRoleByType(val).then(response => {
  375. this.roleList = response;
  376. this.queryParams.roleId=null;
  377. this.form.roleId=null;
  378. })
  379. },
  380. /** 查询机构树数据 */
  381. getDeptTree() {
  382. deptTreeSelect().then(response => {
  383. this.deptOptions = response.data;
  384. this.handleQuery();
  385. });
  386. },
  387. /** 重置按钮操作 */
  388. resetQuery() {
  389. this.resetForm("queryForm");
  390. this.handleQuery();
  391. allRole().then(response => {
  392. this.roleList = response.data;
  393. });
  394. },
  395. // 多选框选中数据
  396. handleSelectionChange(selection) {
  397. this.ids = selection.map(item => item.id)
  398. this.names = selection.map(item => item.planName)
  399. this.single = selection.length !== 1
  400. this.multiple = !selection.length
  401. },
  402. /** 新增按钮操作 */
  403. handleAdd() {
  404. this.reset();
  405. allRole().then(response => {
  406. this.roleList = response.data;
  407. });
  408. this.issue=null;
  409. this.open = true;
  410. this.title = "新增监控调阅任务";
  411. },
  412. /** 修改按钮操作 */
  413. handleUpdate(row) {
  414. this.reset();
  415. const id = row.id || this.ids
  416. getPlan(id).then(response => {
  417. this.form = response.data;
  418. this.initNum = response.data.parentFrequency;
  419. this.issue=response.data.updateBy;
  420. this.open = true;
  421. this.title = "编辑监控调阅任务";
  422. findRoleByType(this.form.orgType).then(response => {
  423. this.roleList = response;
  424. })
  425. });
  426. },
  427. /** 提交按钮 */
  428. submitForm() {
  429. this.$refs["form"].validate(valid => {
  430. if (valid) {
  431. if (this.form.id != null) {
  432. updatePlan(this.form).then(response => {
  433. this.$modal.msgSuccess("修改成功");
  434. this.open = false;
  435. this.getList();
  436. });
  437. } else {
  438. addPlan(this.form).then(response => {
  439. this.$modal.msgSuccess("新增成功");
  440. this.open = false;
  441. this.getList();
  442. });
  443. }
  444. }
  445. });
  446. },
  447. /** 删除按钮操作 */
  448. handleDelete(row) {
  449. const ids = row.id || this.ids;
  450. const names = row.planName || this.names;
  451. this.$modal.confirm('删除计划会清除本周期所有任务,确定执行?').then(function () {
  452. return delPlan(ids);
  453. }).then(() => {
  454. this.getList();
  455. this.$modal.msgSuccess("删除成功");
  456. }).catch(() => {
  457. });
  458. },
  459. handDistribute(row) {
  460. this.$modal.confirm('下发计划会生成本周期所有任务,确定执行?').then(function () {
  461. return distribute(row.id);
  462. }).then(() => {
  463. this.getList();
  464. this.$modal.msgSuccess("下发成功");
  465. }).catch(() => {
  466. });
  467. },
  468. handWithdraw(row){
  469. this.$modal.confirm('撤回计划会清除本周期所有任务,确定执行?').then(function () {
  470. return withdraw(row.id);
  471. }).then(() => {
  472. this.getList();
  473. this.$modal.msgSuccess("撤回成功");
  474. }).catch(() => {
  475. });
  476. },
  477. /** 导出按钮操作 */
  478. handleExport() {
  479. this.download('system/plan/export', {
  480. ...this.queryParams
  481. }, `plan_${new Date().getTime()}.xlsx`)
  482. }
  483. }
  484. };
  485. </script>