createDialig.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
  1. <template>
  2. <el-dialog :title="title" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false" center @close="close">
  3. <div>
  4. <div class="step">
  5. <div class="title">知会阶段:</div>
  6. <div class="step-content">
  7. <div class="step-content-item" :class="{ active: setp == 1 }" @click="changStep(1)">一阶段</div>
  8. <div class="step-content-item" :class="{ active: setp == 2 }" @click="changStep(2)">二阶段</div>
  9. <div class="step-content-item" :class="{ active: setp == 3 }" @click="changStep(3)">三阶段</div>
  10. </div>
  11. </div>
  12. <div class="form">
  13. <el-form :model="form" :rules="rules" ref="ruleFormRef" label-width="120px" :disabled="formDisabled">
  14. <el-row :gutter="20">
  15. <el-col :span="12">
  16. <el-form-item label="执行包信息" prop="packageId">
  17. <el-select filterable class="w100" v-model="form.packageId" placeholder="请选择执行包信息" @change="pkgChange">
  18. <el-option v-for="item in redemptionPkgList" :label="item.scorePackageName" :value="item.id" :key="item.id" />
  19. </el-select>
  20. </el-form-item>
  21. </el-col>
  22. <el-col :span="12">
  23. <el-form-item label="执行包名称" prop="pkgName">
  24. <el-input v-model="form.pkgName" disabled />
  25. </el-form-item>
  26. </el-col>
  27. </el-row>
  28. <el-row :gutter="20">
  29. <el-col :span="12">
  30. <el-form-item label="执行包总值" prop="pkgScore">
  31. <el-input v-model="form.pkgScore" disabled />
  32. </el-form-item>
  33. </el-col>
  34. <el-col :span="12">
  35. <el-form-item label="审核通过积分值" prop="passedByNode6ScoreSum">
  36. <el-input v-model="form.passedByNode6ScoreSum" disabled />
  37. </el-form-item>
  38. </el-col>
  39. </el-row>
  40. <el-row :gutter="20">
  41. <el-col :span="12" v-if="setp !== 1">
  42. <el-form-item label="监督扣减分值" prop="supervisionDeductScore">
  43. <el-input v-model="form.supervisionDeductScore" disabled />
  44. </el-form-item>
  45. </el-col>
  46. <el-col :span="12">
  47. <el-form-item label="可兑付分值" prop="availRdpScore">
  48. <div class="percent-number">
  49. <el-input-number v-model="form.availRdpScore" disabled class="w100" :controls="false" :min="0"> </el-input-number>
  50. </div>
  51. </el-form-item>
  52. </el-col>
  53. </el-row>
  54. <el-row :gutter="20">
  55. <el-col :span="12">
  56. <el-form-item label="本次兑付分值" prop="currentRedemptionScore">
  57. <div class="percent-number">
  58. <el-input-number
  59. v-model="form.currentRedemptionScore"
  60. :disabled="!form.packageId"
  61. class="w100"
  62. :controls="false"
  63. :min="0"
  64. :max="form.availRdpScore"
  65. @blur="currentRedemptionScoreChange"
  66. >
  67. </el-input-number>
  68. </div>
  69. </el-form-item>
  70. </el-col>
  71. <el-col :span="12">
  72. <el-form-item label="本次兑付比例" prop="currentRedemptionRate">
  73. <div class="percent-number">
  74. <el-input-number
  75. v-model="form.currentRedemptionRate"
  76. :disabled="!form.packageId"
  77. class="w100"
  78. :controls="false"
  79. :min="0"
  80. :max="100"
  81. @blur="currentRedemptionRateChange"
  82. /><span>%</span>
  83. </div>
  84. </el-form-item>
  85. </el-col>
  86. </el-row>
  87. <el-row>
  88. <el-form-item>
  89. <Table1 v-if="dialogVisible" ref="table1" @totalPercentageChange="totalPercentageChange" />
  90. </el-form-item>
  91. </el-row>
  92. <el-row :gutter="20">
  93. <el-col :span="12">
  94. <el-form-item label="实际兑付分值" prop="totalAmount">
  95. <div class="percent-number">
  96. <el-input-number v-model="form.totalAmount" disabled class="w100" :controls="false" />
  97. </div>
  98. </el-form-item>
  99. </el-col>
  100. </el-row>
  101. </el-form>
  102. </div>
  103. <div class="status">
  104. <div v-if="detailInfo.checkRemarks">
  105. 事业部分管领导审核说明: <span>{{ detailInfo.checkRemarks }}</span>
  106. </div>
  107. <div v-if="detailInfo.acceptRemarks">
  108. 服务商知会说明: <span>{{ detailInfo.acceptRemarks }}</span>
  109. </div>
  110. </div>
  111. <!-- 当前状态 -->
  112. <!-- <div class="status" v-if="type != 1">
  113. <div>
  114. 当前状态: <span>{{ detailInfo.$checkState }}</span>
  115. </div>
  116. </div> -->
  117. <!-- 申诉原因 -->
  118. <div v-if="type == 3 && !detailInfo.accept">
  119. <el-form :model="confirmForm" :rules="confirmFormRules" ref="confirmFormRef" label-width="100px" class="demo-ruleForm">
  120. <el-form-item label="备注" prop="remarks">
  121. <el-input type="textarea" placeholder="请输入备注,最长500字" maxlength="500" v-model="confirmForm.remarks"></el-input>
  122. </el-form-item>
  123. </el-form>
  124. </div>
  125. <!-- 审核意见 -->
  126. <div v-if="type == 4">
  127. <el-form :model="reviewForm" :rules="reviewFormRules" ref="reviewFormRef" label-width="100px" class="demo-ruleForm">
  128. <el-form-item label="审核意见" prop="checkResult">
  129. <el-radio-group v-model="reviewForm.checkResult">
  130. <el-radio :label="true">通过</el-radio>
  131. <el-radio :label="false">拒绝</el-radio>
  132. </el-radio-group>
  133. </el-form-item>
  134. <el-form-item
  135. label="审批说明"
  136. prop="checkRemarks"
  137. :rules="[
  138. {
  139. required: !reviewForm.checkResult,
  140. message: '请输入审批说明',
  141. trigger: 'blur'
  142. }
  143. ]"
  144. >
  145. <el-input type="textarea" placeholder="请输入审核意见,最长500字" maxlength="500" v-model="reviewForm.checkRemarks"></el-input>
  146. </el-form-item>
  147. </el-form>
  148. </div>
  149. </div>
  150. <!-- 创建按钮 -->
  151. <span slot="footer" class="dialog-footer" v-if="type == 1">
  152. <el-button @click="close">取 消</el-button>
  153. <el-button type="primary" @click="submitInfo">确 定</el-button>
  154. </span>
  155. <!-- 审核按钮 -->
  156. <span slot="footer" class="dialog-footer" v-if="type == 3 && !detailInfo.accept">
  157. <el-button @click="confirmFn('ARGUE')">申 诉</el-button>
  158. <el-button type="primary" @click="confirmFn('CONFIRM')">通 过</el-button>
  159. </span>
  160. <!-- 分管领导按钮 -->
  161. <span slot="footer" class="dialog-footer" v-if="type == 4">
  162. <el-button @click="close">关 闭</el-button>
  163. <el-button type="primary" @click="checkFn">确 定</el-button>
  164. </span>
  165. </el-dialog>
  166. </template>
  167. <script>
  168. import {
  169. redemptionValStatApi,
  170. redemptionNoticeReadApi,
  171. redemptionNoticeCreate,
  172. redemptionNoticeConfirmApi,
  173. redemptionPkgListApi,
  174. redemptionoticeCheckApi
  175. } from '@/api/distributeVoucher.js';
  176. import { mapGetters } from 'vuex';
  177. import Table1 from './table/table1.vue';
  178. export default {
  179. components: { Table1 },
  180. data() {
  181. return {
  182. dialogVisible: false,
  183. type: '',
  184. currentRow: {},
  185. title: '新增',
  186. setp: 1,
  187. formDisabled: false,
  188. redemptionPkgList: [],
  189. form: {
  190. packageId: '',
  191. pkgName: '',
  192. pkgScore: '',
  193. passedByNode6ScoreSum: '',
  194. availRdpScore: 0,
  195. totalAmount: '',
  196. currentRedemptionScore: '',
  197. currentRedemptionRate: ''
  198. },
  199. rules: {
  200. currentRedemptionScore: [{ required: true, message: '请输入本次兑换分值', trigger: 'blur' }],
  201. currentRedemptionRate: [{ required: true, message: '请输入本次兑换分值', trigger: 'blur' }]
  202. },
  203. confirmForm: {
  204. remarks: ''
  205. },
  206. reviewForm: {
  207. checkRemarks: '',
  208. checkResult: ''
  209. },
  210. reviewFormRules: {
  211. checkResult: [{ required: true, message: '请选择审核意见', trigger: 'change' }]
  212. },
  213. confirmFormRules: {
  214. remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }]
  215. },
  216. detailInfo: {},
  217. totalPercentageNums: 0
  218. };
  219. },
  220. created() {
  221. this.getRedemptionPkgListApi();
  222. },
  223. methods: {
  224. changStep(step) {
  225. this.setp = step;
  226. this.getRedemptionPkgListApi();
  227. },
  228. totalPercentageChange(nums) {
  229. this.totalPercentageNums = nums;
  230. if (this.form.currentRedemptionScore) {
  231. const total = (this.form.currentRedemptionScore * nums) / 1000000;
  232. this.form.totalAmount = total;
  233. }
  234. },
  235. async getRedemptionPkgListApi() {
  236. const res = await redemptionPkgListApi(this.setp);
  237. this.redemptionPkgList = res.data.data;
  238. },
  239. // 创建知会
  240. createFn(type) {
  241. this.type = type;
  242. this.title = '新增';
  243. this.formDisabled = false;
  244. this.dialogVisible = true;
  245. },
  246. detail(row, type) {
  247. this.type = type;
  248. this.title = '查阅';
  249. this.detailInfo = row;
  250. if (type == 3 && row.noticeState != 'CONFIRM') {
  251. this.redemptionNoticeRead(row.noticeId);
  252. }
  253. let arr = [
  254. {
  255. id: row.packageId,
  256. scorePackageName: row.packageName
  257. }
  258. ];
  259. this.redemptionPkgList = arr;
  260. this.form.packageId = row.packageId;
  261. this.formDisabled = true;
  262. this.form.pkgName = row.packageName;
  263. this.form.pkgScore = row.packageScore;
  264. this.setp = row.step;
  265. this.form.availRdpScore = row.availRdpScore;
  266. this.form.supervisionDeductScore = row.supervisionDeductScore;
  267. this.form.passedByNode6ScoreSum = row.passedByNode6ScoreSum;
  268. this.form.currentRedemptionScore = row.currentRedemptionScore;
  269. this.form.currentRedemptionRate = row.currentRedemptionRate;
  270. this.dialogVisible = true;
  271. this.$nextTick(() => {
  272. this.$refs.table1.redemptionFn(row.redemptionResult);
  273. });
  274. },
  275. review(row, type) {
  276. this.type = type;
  277. this.title = '审核';
  278. this.form.supervisionDeductScore = row.supervisionDeductScore;
  279. this.currentRow = row;
  280. this.formDisabled = true;
  281. this.setp = row.step;
  282. this.form.packageId = row.packageId;
  283. this.form.availRdpScore = row.availRdpScore;
  284. this.form.passedByNode6ScoreSum = row.passedByNode6ScoreSum;
  285. this.form.pkgName = row.packageName;
  286. this.form.pkgScore = row.packageScore;
  287. this.form.currentRedemptionScore = row.currentRedemptionScore;
  288. this.form.currentRedemptionRate = row.currentRedemptionRate;
  289. this.detailInfo = row;
  290. this.dialogVisible = true;
  291. this.$nextTick(() => {
  292. this.$refs.table1.redemptionFn(row.redemptionResult);
  293. });
  294. },
  295. pkgChange(e) {
  296. this.redemptionValStat(e);
  297. },
  298. async redemptionValStat(id) {
  299. const res = await redemptionValStatApi(id);
  300. if (res.data.code === 0) {
  301. if (res.data.data.taskApprovedScoreRateNinetyPercent) {
  302. this.$refs.table1.setInfo(res.data.data.taskApprovedScoreRateNinetyPercent);
  303. }
  304. this.detailInfo = res.data.data;
  305. this.form.pkgName = res.data.data.pkgName;
  306. this.form.pkgScore = res.data.data.pkgScore;
  307. this.form.passedByNode6ScoreSum = res.data.data.passedByNode6ScoreSum;
  308. this.form.supervisionDeductScore = res.data.data.supervisionDeductScore;
  309. if (this.setp === 1) {
  310. this.form.availRdpScore = res.data.data.availRdpScore > 0 ? res.data.data.availRdpScore : 0;
  311. } else if (this.setp === 2) {
  312. this.form.availRdpScore = res.data.data.step2AvailRdpScore > 0 ? res.data.data.step2AvailRdpScore : 0;
  313. } else {
  314. this.form.availRdpScore = res.data.data.step3AvailRdpScore > 0 ? res.data.data.step3AvailRdpScore : 0;
  315. }
  316. this.$refs.table1.initInfo(this.detailInfo);
  317. }
  318. },
  319. // 提交创建知会
  320. async submitInfo() {
  321. const items = this.$refs.table1.returnInfo();
  322. const obj = {
  323. packageId: this.detailInfo.id,
  324. step: this.setp,
  325. fromEntId: this.detailInfo.fromEntId,
  326. toEntId: this.detailInfo.toEntId,
  327. items: items,
  328. passedByNode6ScoreSum: this.form.passedByNode6ScoreSum,
  329. supervisionDeductScore: this.form.supervisionDeductScore,
  330. availRdpScore: this.form.availRdpScore,
  331. currentRedemptionScore: this.form.currentRedemptionScore,
  332. currentRedemptionRate: this.form.currentRedemptionRate,
  333. totalAmount: this.form.totalAmount,
  334. currentRedemptionTotal: items[0].totalPercentage
  335. };
  336. this.$refs.ruleFormRef.validate(async (valid) => {
  337. if (valid) {
  338. const res = await redemptionNoticeCreate(obj);
  339. if (res.data.code === 0) {
  340. this.$message.success('新增成功');
  341. this.$emit('success');
  342. this.close();
  343. }
  344. }
  345. });
  346. },
  347. async redemptionNoticeRead(id) {
  348. redemptionNoticeReadApi({
  349. noticeId: id
  350. }).then((res) => {
  351. console.log('res', res);
  352. });
  353. },
  354. confirmFn(type) {
  355. this.$refs.confirmFormRef.validate(async (valid) => {
  356. if (valid) {
  357. const obj = {
  358. noticeId: this.detailInfo.noticeId,
  359. state: type,
  360. remarks: this.confirmForm.remarks
  361. };
  362. const res = await redemptionNoticeConfirmApi(obj);
  363. if (res.data.data) {
  364. this.$message.success('添加成功');
  365. this.close();
  366. }
  367. }
  368. });
  369. },
  370. checkFn() {
  371. this.$refs.reviewFormRef.validate(async (valid) => {
  372. if (valid) {
  373. let obj = this.reviewForm;
  374. obj.redemptionNoticeId = this.currentRow.noticeId;
  375. const res = await redemptionoticeCheckApi(this.reviewForm);
  376. if (res.data.data) {
  377. this.$message.success('审核成功!');
  378. this.close();
  379. }
  380. }
  381. });
  382. },
  383. close() {
  384. this.type = '';
  385. this.formDisabled = false;
  386. this.form = {
  387. pkgName: '',
  388. pkgScore: '',
  389. currentRedemptionScore: '',
  390. currentRedemptionRate: ''
  391. };
  392. if (this.$refs.reviewFormRef) {
  393. this.$refs.reviewFormRef.resetFields();
  394. }
  395. this.confirmForm.remarks = '';
  396. this.detailInfo = {};
  397. this.dialogVisible = false;
  398. this.$emit('success');
  399. },
  400. currentRedemptionScoreChange() {
  401. let e = this.form.currentRedemptionScore;
  402. if (e) {
  403. const currentRedemptionRate = (e / this.form.pkgScore) * 100;
  404. let num = currentRedemptionRate.toFixed(2);
  405. this.form.currentRedemptionRate = Number(num);
  406. if (this.totalPercentageNums && this.form.pkgScore) {
  407. this.totalPercentageChange(this.totalPercentageNums);
  408. }
  409. }
  410. },
  411. currentRedemptionRateChange() {
  412. let e = this.form.currentRedemptionRate;
  413. if (e) {
  414. const num = e / 100;
  415. this.form.currentRedemptionScore = num * this.form.pkgScore;
  416. if (this.totalPercentageNums && this.form.pkgScore) {
  417. this.totalPercentageChange(this.totalPercentageNums);
  418. }
  419. }
  420. }
  421. }
  422. };
  423. </script>
  424. <style lang="scss" scoped>
  425. .form {
  426. margin-bottom: 10px;
  427. width: 100%;
  428. }
  429. .step {
  430. display: flex;
  431. align-items: center;
  432. margin-bottom: 15px;
  433. padding-left: 35px;
  434. .title {
  435. font-size: 16px;
  436. font-weight: bold;
  437. color: #333;
  438. line-height: 18px;
  439. margin-right: 5px;
  440. }
  441. .step-content {
  442. display: flex;
  443. .step-content-item {
  444. margin-right: 10px;
  445. padding: 5px;
  446. line-height: 18px;
  447. border: 1px solid #dcdfe6;
  448. cursor: pointer;
  449. &.active {
  450. background: #6eb657;
  451. color: #fff;
  452. }
  453. }
  454. }
  455. }
  456. .percent-number {
  457. display: flex;
  458. align-items: center;
  459. span {
  460. color: #909399;
  461. position: absolute;
  462. right: 10px;
  463. }
  464. }
  465. .status {
  466. margin: 20px 0;
  467. span {
  468. font-weight: 400;
  469. }
  470. }
  471. </style>