declareDetail.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. <template>
  2. <div class="app-container">
  3. <div class="title-container">
  4. <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
  5. </div>
  6. <el-collapse v-model="activeNames" style="margin-top: 0px;">
  7. <el-collapse-item name="board">
  8. <template slot="title">
  9. <span style="font-size:15px; margin-left:15px;letter-spacing:2px; color:RGB(168,168,168)">
  10. 点击展开查看实时流程图
  11. </span>
  12. </template>
  13. <WorkflowBoard ref='board' :nodeBusinessInfo="nodeBusinessInfo" />
  14. </el-collapse-item>
  15. </el-collapse>
  16. <div class="button-area">
  17. <el-button v-if="nodeBusinessInfo.currentNodePermission.commit && doWorkflow" class="y-save" type="success" round
  18. @click="commit('PASS')">通过</el-button>
  19. <el-button v-if="nodeBusinessInfo.currentNodePermission.terminable && doWorkflow" class="y-save" type="danger" round
  20. @click="commit('TERMINATE')">拒绝</el-button>
  21. <el-button class="y-save" round type="info" @click="goBack">返回</el-button>
  22. </div>
  23. <el-card>
  24. <el-divider content-position="left">
  25. <span style="color:red;font-weight: bold;">
  26. 【{{ this.nodeBusinessInfo.mainBusiness === 'COMMISSION_DECLARE_MAJOR_EVALUATE' ? '评估人员' : '市场人员' }}】
  27. </span>大中型业务提成申报详情</el-divider>
  28. <el-form :model="declareForm" ref="declareForm">
  29. <el-row>
  30. <el-col :xs="24" :sm="12" :lg="24" :span="6">
  31. <el-form-item label="项目名称:" prop="name" label-width="140px" class="postInfo-container-item">
  32. <el-input :value="declareForm.name" style="width: 100%;" readonly disabled></el-input>
  33. </el-form-item>
  34. </el-col>
  35. </el-row>
  36. <el-row>
  37. <el-col :xs="24" :sm="12" :lg="12" :span="6">
  38. <el-form-item label="订单号:" prop="orderId" label-width="140px" class="postInfo-container-item">
  39. <el-input :value="declareForm.orderId" style="width: 100%;" readonly
  40. disabled></el-input>
  41. </el-form-item>
  42. </el-col>
  43. <el-col :xs="24" :sm="12" :lg="12" :span="6">
  44. <el-form-item label="报告号:" prop="reportNo" label-width="140px" class="postInfo-container-item">
  45. <el-input :value="declareForm.reportNo" style="width: 100%;" readonly
  46. disabled></el-input>
  47. </el-form-item>
  48. </el-col>
  49. </el-row>
  50. <el-row>
  51. <el-col :xs="24" :sm="12" :lg="12" :span="6">
  52. <el-form-item label="客户名称:" prop="clientName" label-width="140px" class="postInfo-container-item">
  53. <el-input :value="declareForm.clientName" style="width: 100%;" readonly
  54. disabled></el-input>
  55. </el-form-item>
  56. </el-col>
  57. <el-col :xs="24" :sm="12" :lg="12" :span="6">
  58. <el-form-item label="业务来源:" prop="clientSubName" label-width="140px" class="postInfo-container-item">
  59. <el-input :value="declareForm.clientSubName" style="width: 100%;" readonly
  60. disabled></el-input>
  61. </el-form-item>
  62. </el-col>
  63. </el-row>
  64. <el-row>
  65. <el-col :xs="24" :sm="12" :lg="12" :span="6">
  66. <el-form-item label="业务分类:" prop="businessCate" label-width="140px" class="postInfo-container-item">
  67. <el-select clearable v-model="declareForm.commissionRateId" placeholder="请选择业务分类" style="width: 80%;"
  68. :disabled="!nodeBusinessInfo.currentNodeCode == 'DEPARTMENT_LEADER_CHECK'">
  69. <el-option v-for="(c, id) in cates" :value="c.id" :label="c.name">{{ c.name }}</el-option>
  70. </el-select>
  71. <el-button @click="updateMajorCommissionDeclare()" style="margin-left: 10px;" type="danger" :disabled="!nodeBusinessInfo.currentNodeCode == 'DEPARTMENT_LEADER_CHECK'" round>
  72. 修改
  73. </el-button>
  74. <!-- <el-input :value="declareForm.businessCate" :step="1" :max="100" style="width: 100%;" readonly
  75. disabled></el-input> -->
  76. </el-form-item>
  77. </el-col>
  78. <el-col :xs="24" :sm="12" :lg="12" :span="6">
  79. <el-form-item label="产品类型:" prop="production" label-width="140px" class="postInfo-container-item">
  80. <el-input :value="prod" style="width: 100%;" readonly disabled></el-input>
  81. </el-form-item>
  82. </el-col>
  83. </el-row>
  84. <el-row>
  85. <el-col :xs="24" :sm="12" :lg="12" :span="6">
  86. <el-form-item label="申报人:" prop="declareUser" label-width="140px" class="postInfo-container-item">
  87. <el-input :value="declareForm.declareUser" style="width: 100%;" readonly disabled>
  88. </el-input>
  89. </el-form-item>
  90. </el-col>
  91. <el-col :xs="24" :sm="12" :lg="12" :span="6">
  92. <el-form-item label="申报日期:" prop="created" label-width="140px" class="postInfo-container-item">
  93. <el-input :value="declareForm.created" style="width: 100%;" readonly disabled></el-input>
  94. </el-form-item>
  95. </el-col>
  96. </el-row>
  97. <el-row>
  98. <el-col :xs="24" :sm="12" :lg="12" :span="6">
  99. <el-form-item label="审核状态:" prop="declareResult" label-width="140px" class="postInfo-container-item">
  100. <el-input :value="declareForm.declareResult" :class="['filter-item', 'resaon_input']" readonly disabled>
  101. </el-input>
  102. </el-form-item>
  103. </el-col>
  104. <el-col :xs="24" :sm="12" :lg="12" :span="6">
  105. <el-form-item label="审核备注:" prop="remarks" label-width="140px" class="postInfo-container-item">
  106. <el-input :value="declareForm.remarks + ''" style="width: 100%; color: red;" readonly disabled></el-input>
  107. </el-form-item>
  108. </el-col>
  109. </el-row>
  110. <el-row>
  111. <el-col :xs="24" :sm="12" :lg="12" :span="6">
  112. <el-form-item label="客户经理:" prop="clientManager" label-width="140px" class="postInfo-container-item">
  113. <el-input :value="declareForm.clientManager" :class="['filter-item']" readonly disabled>
  114. </el-input>
  115. </el-form-item>
  116. </el-col>
  117. <el-col :xs="24" :sm="12" :lg="12" :span="6">
  118. <el-form-item label="委托人:" prop="bailor" label-width="140px" class="postInfo-container-item">
  119. <el-input :value="declareForm.bailor + ''" style="width: 100%; color: red;" readonly disabled></el-input>
  120. </el-form-item>
  121. </el-col>
  122. </el-row>
  123. <el-table :data="declareForm.userShareRates" border style="width: 100%; margin-top: 10px; margin-bottom: 10px;">
  124. <el-table-column prop="userId"
  125. :label="this.nodeBusinessInfo.mainBusiness === 'COMMISSION_DECLARE_MAJOR_EVALUATE' ? '评估人员' : '市场人员'"
  126. align="center">
  127. <template slot-scope="{row}">
  128. <span>{{ row.name }}</span>
  129. </template>
  130. </el-table-column>
  131. <el-table-column prop="rate" label="提成比例" align="center">
  132. <template slot-scope="{row}">
  133. <span style="color: red;">{{ row.rate * 100 }}%</span>
  134. </template>
  135. </el-table-column>
  136. </el-table>
  137. </el-form>
  138. </el-card>
  139. </div>
  140. </template>
  141. <script>
  142. import Breadcrumb from '@/components/Breadcrumb'
  143. import WorkflowBoard from '@/components/workflowBoard'
  144. export default {
  145. name: 'declareDetail',
  146. components: {
  147. Breadcrumb,
  148. WorkflowBoard
  149. },
  150. filters: {
  151. },
  152. computed: {
  153. prod() {
  154. if (this.declareForm.production === 'REPORT') {
  155. return "报告";
  156. }
  157. if (this.declareForm.production === 'LETTER') {
  158. return "复评函";
  159. }
  160. if (this.declareForm.production === 'STATEMENT') {
  161. return "价值意见书";
  162. }
  163. }
  164. },
  165. data() {
  166. return {
  167. activeNames: ['board'],
  168. nodeBusinessInfo: {
  169. currentNodePermission: {
  170. commit: true,
  171. reversible: true,
  172. restartable: true,
  173. terminable: true,
  174. skippable: true,
  175. },
  176. mainBusiness: null,
  177. doWorkflow: null,
  178. businessSubId: null,
  179. businessId: null,
  180. currentInstanceNodeId: null,
  181. production: [],
  182. ifSkip: false,
  183. currentNodeCode: null
  184. },
  185. doWorkflow: false,
  186. declareForm: {
  187. orderId: null,
  188. name: null,
  189. reportNo: null,
  190. businessId: null,
  191. productionId: null,
  192. businessType: null,
  193. commissionRateId: null,
  194. userShareRates: [
  195. {
  196. userId: this.$store.getters.userInfo.id,
  197. rate: 100
  198. }
  199. ],
  200. production: null,
  201. remarks: []
  202. },
  203. users: [],
  204. cates: [],
  205. currentNode: {
  206. flowId: null,
  207. pnodeId: null,
  208. nodeId: null,
  209. flowCode: null,
  210. nodeName: "",
  211. nodeCode: null,
  212. state: "",
  213. instanceId: null,
  214. sequence: null,
  215. restartable: null,
  216. reversible: null,
  217. skippable: null,
  218. terminable: null,
  219. tasks: []
  220. }
  221. }
  222. },
  223. created() {
  224. this.nodeBusinessInfo.businessId = this.$route.query.businessId;
  225. this.nodeBusinessInfo.mainBusiness = this.$route.query.businessType;
  226. this.declareForm.businessType = this.$route.query.businessType;
  227. this.doWorkflow = this.$route.query.doWorkflow === 'true';
  228. this.getMajorMarketCate();
  229. this.getCurrentNodeInfo();
  230. this.businessId = this.$route.query.businessId;
  231. this.getDeclareDetail();
  232. },
  233. methods: {
  234. getCurrentNodeInfo() {
  235. if (this.nodeBusinessInfo.businessId) {
  236. this.$api.workNodeInstance.currentNode({
  237. "mainBusiness": this.nodeBusinessInfo.mainBusiness,
  238. "businessId": this.nodeBusinessInfo.businessId
  239. }).then(res => {
  240. if (res.code === 200 && res.data != null) {
  241. this.currentNode = res.data;
  242. this.nodeBusinessInfo.currentInstanceNodeId = res.data.instanceId;
  243. this.nodeBusinessInfo.currentNodeCode = res.data.nodeCode;
  244. }
  245. this.$refs.board.getInstanceArray(this.nodeBusinessInfo.mainBusiness, this.nodeBusinessInfo.businessId);
  246. })
  247. }
  248. },
  249. goBack() {
  250. const back = this.$route.query.back
  251. if (back) {
  252. this.$router.push(back)
  253. }
  254. },
  255. getSimpleAllUser() {
  256. this.$api.user.simpleAll().then(res => {
  257. if (res.code === 200) {
  258. this.users = res.data;
  259. }
  260. })
  261. },
  262. // getMajorMarketCate() {
  263. // this.$api.businessCommissionRate.cateList("BUSINESS_MAJOR", "MARKETER").then(res => {
  264. // if (res.code === 200) {
  265. // this.cates = res.data;
  266. // }
  267. // })
  268. // },
  269. getDeclareDetail() {
  270. this.$api.commissonDeclare.detail(this.businessId).then(res => {
  271. if (res.code === 200) {
  272. this.declareForm = res.data;
  273. }
  274. })
  275. },
  276. //提交节点
  277. commit(state) {
  278. if (this.declareForm.businessCate === '一般业务'
  279. && this.nodeBusinessInfo.currentNodeCode === 'DEPARTMENT_LEADER_CHECK'
  280. && this.nodeBusinessInfo.mainBusiness === 'COMMISSION_DECLARE_MAJOR_EVALUATE') {
  281. this.nodeBusinessInfo.ifSkip = true;
  282. }
  283. this.$refs.board.commit(state);
  284. },
  285. getMajorMarketCate() {
  286. this.$api.businessCommissionRate.cateList("MAJOR_BUSINESS", this.nodeBusinessInfo.mainBusiness === 'COMMISSION_DECLARE_MAJOR_EVALUATE' ? 'EVALUATOR' : 'MARKETER').then(res => {
  287. if (res.code === 200) {
  288. this.cates = res.data;
  289. }
  290. })
  291. },
  292. updateMajorCommissionDeclare() {
  293. let declareDTO = new Object();
  294. declareDTO.id = this.businessId;
  295. declareDTO.commissionRateId = this.declareForm.commissionRateId;
  296. declareDTO.recordId = this.currentNode.tasks[0].recordId;
  297. this.$api.commissonDeclare.updateMajorCommissionDeclare(declareDTO).then(res => {
  298. if (res.code === 200 && res.data) {
  299. this.$notify({
  300. title: '成功',
  301. message: '业务分类更新成功!',
  302. type: 'success',
  303. duration: 3000
  304. });
  305. this.getDeclareDetail();
  306. } else {
  307. this.$notify({
  308. title: '失败',
  309. message: '业务分类更新失败!请稍后重试!',
  310. type: 'warning',
  311. duration: 3000
  312. });
  313. }
  314. })
  315. }
  316. },
  317. }
  318. </script>
  319. <style lang="scss" scoped>
  320. .button-area {
  321. position: absolute;
  322. top: 40px;
  323. right: 50px;
  324. }
  325. .resaon_input {
  326. /deep/ .el-input__inner {
  327. color: red !important;
  328. font-weight: bold;
  329. }
  330. }
  331. </style>