itdmGcShishi.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  1. <template>
  2. <div class="u-OA-jixiao">
  3. <div class="head">第三部分 项目过程实施</div>
  4. <el-form ref="gsShishiForm" :model="stepEdit" :rules="rules">
  5. <table class="main-table">
  6. <tr v-for="(item, key) in stepEdit.assessmentLog" :key="key">
  7. <!-- <td :rowspan="12" style="width: 80px">项目成员<br/>考核日志</td> -->
  8. <td class="title" style="width: 100px;">
  9. <div>{{key + 1}}</div>
  10. <el-form-item :prop="`assessmentLog[${key}].name`" :rules="rules.name">
  11. <el-input v-model="item.name" :readonly="stepParameter.disabled" placeholder="请输入人员" class="person-input"></el-input>
  12. </el-form-item>
  13. <el-form-item :prop="`assessmentLog[${key}].job`">
  14. <el-input v-model="item.job" :readonly="stepParameter.disabled" placeholder="请输入职务" class="person-input"></el-input>
  15. </el-form-item>
  16. </td>
  17. <td class="content" colspan="6">
  18. <div style="display: flex; align-items: flex-end;">
  19. <div style="width: 500px;">
  20. <div>——★考核结果★——工作质量10×积极性10×工作量{{item.gzlItemTotal}}=得分{{item.itemDefen}}</div>
  21. <el-table :data="item.resultData" class="u-dynamic-table" border ref="table" style="width: 800px;">
  22. <el-table-column type="index" label="序号" align="center" min-width="60"></el-table-column>
  23. <el-table-column prop="date" label="日期" align="center" min-width="120">
  24. <template slot-scope="scope">
  25. <el-input v-model="scope.row.date" placeholder="请输入" :disabled="stepParameter.disabled"/>
  26. </template>
  27. </el-table-column>
  28. <el-table-column prop="gongshi" label="工时" align="center" min-width="120">
  29. <template slot-scope="scope">
  30. <el-form-item :prop="`assessmentLog[${key}].resultData[${scope.$index}].gongshi`" :rules="rules.gongshi">
  31. <el-input-number v-model="scope.row.gongshi" controls-position="right" @change="handleInputChange(item, key, scope.$index)" :min="0" :disabled="stepParameter.disabled"></el-input-number>
  32. </el-form-item>
  33. </template>
  34. </el-table-column>
  35. <el-table-column prop="qiangdu" label="强度" align="center" min-width="120">
  36. <template slot-scope="scope">
  37. <el-form-item :prop="`assessmentLog[${key}].resultData[${scope.$index}].qiangdu`" :rules="rules.qiangdu">
  38. <el-input-number v-model="scope.row.qiangdu" controls-position="right" @change="handleInputChange(item, key, scope.$index)" :min="0" :disabled="stepParameter.disabled"></el-input-number>
  39. </el-form-item>
  40. </template>
  41. </el-table-column>
  42. <el-table-column prop="gzliang" label="工作量" align="center" min-width="120"></el-table-column>
  43. </el-table>
  44. </div>
  45. <el-button v-if="key !== 0" class="addRow" @click="delPersonRow(key)" :disabled='stepParameter.disabled'>删除</el-button>
  46. <el-button v-if="key === stepEdit.assessmentLog.length - 1" class="addRow" @click="addPersonRow" :disabled='stepParameter.disabled'>添加</el-button>
  47. </div>
  48. </td>
  49. <td class="content" colspan="2" style="width: 200px;font-weight: bold;color: #e52727;font-size: 15px;">★量化积分—{{ item.lhJifen }}</td>
  50. </tr>
  51. <tr>
  52. <td class="title" style="width: 100px;">非考核<br/>支持人员</td>
  53. <td class="content" colspan="4">
  54. <div style="display: flex;align-items: flex-end;">
  55. <el-table :data="stepEdit.feikaohePersons" class="u-dynamic-table" style="width: 90%" border>
  56. <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
  57. <el-table-column prop="person" label="人员" min-width="60" align="center">
  58. <template slot-scope="scope">
  59. <el-input v-model="scope.row.person" placeholder="请输入" :readonly="stepParameter.disabled"/>
  60. </template>
  61. </el-table-column>
  62. <el-table-column prop="content" label="支持内容" min-width="80" align="center">
  63. <template slot-scope="scope">
  64. <el-input v-model="scope.row.content" placeholder="请输入" :readonly="stepParameter.disabled"/>
  65. </template>
  66. </el-table-column>
  67. <el-table-column prop="time" label="支持工时" min-width="80" align="center">
  68. <template slot-scope="scope">
  69. <el-input v-model="scope.row.time" placeholder="请输入" :readonly="stepParameter.disabled"/>
  70. </template>
  71. </el-table-column>
  72. <el-table-column prop="remark" label="备注" min-width="80" align="center">
  73. <template slot-scope="scope">
  74. <el-input v-model="scope.row.remark" placeholder="请输入" :readonly="stepParameter.disabled"/>
  75. </template>
  76. </el-table-column>
  77. <el-table-column label="操作" min-width="100" align="center">
  78. <template slot-scope="scope">
  79. <el-button type="text" size="small" @click="stepEdit.feikaohePersons.splice(scope.$index, 1)" :disabled="stepParameter.disabled">删除</el-button>
  80. </template>
  81. </el-table-column>
  82. </el-table>
  83. <el-button class="addRow" @click="stepEdit.feikaohePersons.push({})" :disabled='stepParameter.disabled'>添加</el-button>
  84. </div>
  85. </td>
  86. <td class="title white" style="width: 100px;">项目成员<br/>考核汇总</td>
  87. <td class="content" colspan="3">
  88. <span>工时:{{ zongGongshi }}</span>
  89. <span>强度:{{ zongQiangdu }}</span>
  90. <span>工作量:{{ zongGongzuoliang }}</span>
  91. <span>总得分:{{ stepEdit.zongfen }}</span>
  92. </td>
  93. </tr>
  94. <tr>
  95. <td class="title" style="width: 100px;">项目完工<br/>申请</td>
  96. <td class="content" colspan="4">
  97. <el-radio-group v-model="stepEdit.isApply" :disabled="stepParameter.disabled">
  98. <el-radio :label="0">是</el-radio>
  99. <el-radio :label="1">否</el-radio>
  100. </el-radio-group>
  101. </td>
  102. <td class="title white" style="width: 100px;">提交人</td>
  103. <td class="content" colspan="3">
  104. {{ stepParameter.fqUserName }} {{ stepParameter.shenheTime }}
  105. <div class="btn" @click="submitData" :style="{'pointer-events':stepParameter.disabled?'none':'auto'}">保存</div>
  106. </td>
  107. </tr>
  108. </table>
  109. </el-form>
  110. </div>
  111. </template>
  112. <script>
  113. import { jixiaoPersonPrice } from '@/api/api'
  114. export default {
  115. name: 'itdmGcShishi',
  116. props: {
  117. // json
  118. tableData3: {
  119. type: Array,
  120. default: false,
  121. required: false
  122. }
  123. },
  124. data() {
  125. return {
  126. // 第三部分所需步骤参数
  127. stepParameter: {
  128. disabled: true,
  129. fqUserName: null,
  130. shenheTime: null,
  131. },
  132. stepEdit: {
  133. // 考核人员量化积分情况
  134. assessmentLog: [
  135. {
  136. name: '',
  137. job: '',
  138. gzlItemTotal: 0, // 每个人的工作量和
  139. itemDefen: 0, // 每个人的得分和
  140. lhJifen: 0, // 每个人的量化积分
  141. resultData: [{gongshi: 0, qiangdu: 0, gzliang: 0}], // 每个人单条工作量(目前只设置一条不能增)
  142. }
  143. ],
  144. zongfen: 0, // 所有人的总分(该项目的总分)
  145. feikaohePersons: [], // 非考核支持人员
  146. isApply: 0, // 是否申请完工
  147. },
  148. rules: {
  149. name: [
  150. { required: true, message: "不能为空", trigger: "change" }
  151. ],
  152. gongshi: [
  153. { required: true, message: "不能为空", trigger: "change" }
  154. ],
  155. qiangdu: [
  156. { required: true, message: "不能为空", trigger: "change" }
  157. ],
  158. },
  159. // 绩效总额(第一步之后按照第五步显示的计算的绩效总额)
  160. xnJixiaoZonge: 0,
  161. }
  162. },
  163. watch: {
  164. tableData3: {
  165. handler(newV, oldV){
  166. if(newV && newV[1]){
  167. console.log(newV)
  168. var arrData = newV[1]
  169. this.stepEdit = arrData.saveData ? JSON.parse(arrData.saveData) : this.stepEdit
  170. this.stepParameter = arrData
  171. this.stepParameter.disabled = !(arrData.dangqian && arrData.isUpdate)
  172. console.log(this.stepParameter)
  173. this.xnJixiaoZonge = JSON.parse(newV[0].saveData).xnJixiaoZonge
  174. }
  175. },
  176. // deep: true,
  177. immediate: true
  178. }
  179. },
  180. computed: {
  181. zongGongshi(){
  182. var sum
  183. sum = this.stepEdit.assessmentLog.reduce((prev, curr, index) => {
  184. const value = Number(curr.resultData.gongshi);
  185. //确定数据是否为空,不为空进行计算,为空返回原值
  186. if (!isNaN(value)) {
  187. console.log(value)
  188. return prev + value
  189. } else {
  190. return prev;
  191. }
  192. }, 0);
  193. return sum
  194. },
  195. zongQiangdu(){
  196. var sum
  197. sum = this.stepEdit.assessmentLog.reduce((prev, curr, index) => {
  198. const value = Number(curr.resultData.qiangdu);
  199. //确定数据是否为空,不为空进行计算,为空返回原值
  200. if (!isNaN(value)) {
  201. return prev + value
  202. } else {
  203. return prev;
  204. }
  205. }, 0);
  206. return sum
  207. },
  208. zongGongzuoliang(){
  209. var sum
  210. sum = this.stepEdit.assessmentLog.reduce((prev, curr, index) => {
  211. const gongshi = Number(curr.resultData.gongshi);
  212. const qiangdu = Number(curr.resultData.qiangdu);
  213. //确定数据是否为空,不为空进行计算,为空返回原值
  214. if (!isNaN(gongshi) && !isNaN(qiangdu) ) {
  215. return prev + (gongshi * qiangdu)
  216. } else {
  217. return prev;
  218. }
  219. }, 0);
  220. return sum
  221. },
  222. zongFen(){
  223. var sum
  224. sum = this.stepEdit.assessmentLog.reduce((prev, curr, index) => {
  225. const gongshi = Number(curr.resultData.gongshi);
  226. const qiangdu = Number(curr.resultData.qiangdu);
  227. //确定数据是否为空,不为空进行计算,为空返回原值
  228. if (!isNaN(gongshi) && !isNaN(qiangdu) ) {
  229. return prev + (gongshi * qiangdu * 10 * 10)
  230. } else {
  231. return prev;
  232. }
  233. }, 0);
  234. return sum
  235. },
  236. },
  237. created(){
  238. console.log(33333,this.tableData3)
  239. },
  240. methods: {
  241. // 添加一行考核人员及其绩效
  242. addPersonRow(){
  243. this.stepEdit.assessmentLog.push({
  244. name: '',
  245. job: '',
  246. gzlItemTotal: 0,
  247. itemDefen: 0,
  248. lhJifen: 0,
  249. resultData: [{gongshi: 0, qiangdu: 0, gzliang: 0}] })
  250. },
  251. // 删除当前考核人员及其绩效
  252. delPersonRow(key){
  253. this.stepEdit.assessmentLog.splice(key, 1)
  254. },
  255. // 当工时或强度改变时,计算工作量和量化积分
  256. handleInputChange(item, key, index){
  257. // 计算当前人员当前行工作量
  258. var gzliang = item.resultData[index].gongshi * item.resultData[index].qiangdu
  259. this.stepEdit.assessmentLog[key].resultData[index].gzliang = gzliang
  260. // 计算当前人员工作量(现在是只有一行,即只有一个工作量,万一以后有多个工作量需要求和,如下)
  261. var gzlItemTotal = this.stepEdit.assessmentLog[key].resultData.reduce((old, now) => {
  262. console.log(old, now)
  263. return old + now.gzliang
  264. }, 0)
  265. this.stepEdit.assessmentLog[key].gzlItemTotal = gzlItemTotal
  266. // 计算当前人员个人得分和
  267. this.stepEdit.assessmentLog[key].itemDefen = 10 * 10 * gzlItemTotal
  268. // 计算总分
  269. this.stepEdit.zongfen = this.stepEdit.assessmentLog.reduce((old, now) => {
  270. return old + now.itemDefen
  271. }, 0)
  272. // 计算量化积分
  273. this.stepEdit.assessmentLog.forEach(res => {
  274. res.lhJifen = ((res.itemDefen / this.stepEdit.zongfen) * this.xnJixiaoZonge).toFixed(2)
  275. })
  276. console.log(this.stepEdit.assessmentLog)
  277. },
  278. submitData() {
  279. // console.log(this.stepParameter)
  280. // console.log(this.$route.query.weituoNo)
  281. this.$refs["gsShishiForm"].validate(valid => {
  282. if (valid) {
  283. var saveData = {
  284. runFlowPathStep: this.stepParameter.id,
  285. saveData: JSON.stringify(this.stepEdit),
  286. }
  287. this.$emit('save', saveData)
  288. }
  289. })
  290. },
  291. }
  292. }
  293. </script>
  294. <style scoped>
  295. @import '~@assets/less/common.less';
  296. table * {
  297. box-sizing: border-box;
  298. font-size: 14px;
  299. }
  300. table {
  301. border: 1px solid rgb(30, 53, 65);
  302. width: 100%;
  303. table-layout:fixed;
  304. }
  305. td {
  306. text-align: center;
  307. border: 1px solid rgb(30, 53, 65);
  308. }
  309. tr {
  310. height: 50px;
  311. }
  312. .main-table {
  313. background-color: #FDEADA;
  314. }
  315. .title {
  316. background-color: #fff;
  317. font-weight: bold;
  318. }
  319. .addRow {
  320. padding: 6px 10px;
  321. text-align: center;
  322. font-size: 12px;
  323. margin-left: 20px;
  324. }
  325. .btn {
  326. display: inline-block;
  327. padding: 2px 10px;
  328. font-size: 13px;
  329. border: 1px solid rgb(3, 188, 244);
  330. color: rgb(8, 187, 241);
  331. border-radius: 4px;
  332. cursor: pointer;
  333. position: absolute;
  334. right: 3%;
  335. }
  336. .delBtn {
  337. padding: 3px 10px;
  338. text-align: center;
  339. font-size: 12px;
  340. }
  341. input {
  342. padding: 0 20px;
  343. height: 50px;
  344. outline: none;
  345. border: none;
  346. background: transparent;
  347. }
  348. .head {
  349. height: 35px;
  350. background-color: #FFFF00;
  351. text-align: center;
  352. line-height: 35px;
  353. font-weight: bold;
  354. font-size: 18px;
  355. border: 1px solid rgb(30, 53, 65);
  356. }
  357. </style>
  358. <style lang="less">
  359. .person-input{
  360. .el-input__inner{
  361. border: none;
  362. border-bottom: 1px solid #DCDFE6;
  363. padding: 0 4px;
  364. border-radius: 0;
  365. }
  366. }
  367. </style>