edit.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. /**
  2. @author:fugy
  3. @date:2018.10.24
  4. @info:项目sop编辑和配置页面
  5. */
  6. <template>
  7. <div v-if="itemData">
  8. <div class="top">
  9. <el-button size="medium" @click="goBack()">返回</el-button>
  10. <el-button type="primary" size="medium" @click="save()">保存</el-button>
  11. </div>
  12. <hr class="line" />
  13. <div class="item-info">
  14. <p><span>问题名称 : </span><span>{{itemData.name}}</span></p>
  15. <p><span>问题编号 : </span><span>{{itemData.serialId}}</span></p>
  16. <p><span>问题类型 : </span><span>{{itemData.type}}</span></p>
  17. <p><span>优先级 : </span><span>{{itemData.priority}}</span></p>
  18. <!-- <p><span>适用建筑功能类型 : </span><span>{{"12312313"}}</span></p> -->
  19. <p><span>问题详述 : </span><span>{{itemData.remark || "---"}}</span></p>
  20. <div class="link-div">
  21. <span class="left">关联的项目SOP : </span>
  22. <div class="right">
  23. <el-button size="medium" @click="selectSopHandle">点击选择</el-button>
  24. <ul v-if="sopArr.length">
  25. <li v-for="(item, index) in sopArr" :key="index">
  26. <span class="sop-name">{{item.sopName}}</span>
  27. <i class="el-icon-error sop-icon-del" @click="delSopHandle(index)"></i>
  28. </li>
  29. </ul>
  30. </div>
  31. </div>
  32. </div>
  33. <!-- components -->
  34. <v-select-sop
  35. :selectSopVisibleFlag="selectSopVisibleFlag"
  36. :checkedSopArr="sopArr"
  37. :projectId="projectId"
  38. @sop-checked="sopCheckedHandle">
  39. </v-select-sop>
  40. </div>
  41. </template>
  42. <script>
  43. // component
  44. import vSelectSop from './selectsop'; //选择sop页面
  45. // api
  46. import api from "@/api/fm/sop";
  47. export default {
  48. name: "sop-edit-page",
  49. data() {
  50. return {
  51. selectSopVisibleFlag: false, //选择sop的弹窗flag
  52. projectId:null, //项目id
  53. itemData: null, //itemData,
  54. sopArr:[], //sopArr
  55. }
  56. },
  57. components: {
  58. vSelectSop,
  59. },
  60. props:["editData","initFlag"],
  61. methods: {
  62. // 点击选择sop
  63. selectSopHandle() {
  64. this.selectSopVisibleFlag = !this.selectSopVisibleFlag;
  65. },
  66. // 返回
  67. goBack() {
  68. let refresh = false
  69. this.$emit("to-list", refresh);
  70. },
  71. // 删除sop
  72. delSopHandle(index) {
  73. this.sopArr.splice(index, 1);
  74. },
  75. // 保存
  76. async save() {
  77. let sopArr = this.sopArr.map((ele, index) => {
  78. return {sopId: ele.sopId}
  79. });
  80. let params = {
  81. id: this.itemData.id,
  82. projectId: this.projectId,
  83. sopList: sopArr
  84. }
  85. let {result} = await api.setSop(params);
  86. if(result === "success") {
  87. this.$message({
  88. message: '保存成功',
  89. type: 'success'
  90. });
  91. // 跳转隐藏切换
  92. let refresh = true;
  93. this.$emit("to-list", refresh);
  94. }
  95. },
  96. /********************组件回传事件****************************** */
  97. sopCheckedHandle(arr) {
  98. this.sopArr = arr;
  99. }
  100. },
  101. watch:{
  102. editData(val) {
  103. this.itemData = val
  104. this.projectId = val.projectId;
  105. this.sopArr = JSON.parse(JSON.stringify(val.sopList));
  106. },
  107. initFlag(val) {
  108. this.projectId = this.editData.projectId;
  109. this.sopArr = JSON.parse(JSON.stringify(this.editData.sopList));
  110. }
  111. }
  112. }
  113. </script>
  114. <style lang="less" scoped>
  115. .top{
  116. display: flex;
  117. justify-content: space-between
  118. }
  119. .line {
  120. background-color: #ccc;
  121. height: 1px;
  122. border: none;
  123. margin: 10px 0
  124. }
  125. .item-info{
  126. padding-left:20%;
  127. font-size: 14px;
  128. color: #5e6d82;
  129. p{
  130. padding: 10px 0;
  131. overflow: hidden;
  132. span {
  133. float: left;
  134. }
  135. span:nth-of-type(1){
  136. margin-right: 20px;
  137. }
  138. }
  139. .link-div {
  140. overflow: hidden;
  141. .left, .right{
  142. float: left;
  143. }
  144. .left {
  145. padding-top: 8px;
  146. }
  147. .right {
  148. margin-left: 20px;
  149. }
  150. li {
  151. overflow: hidden;
  152. width: 400px;
  153. margin: 5px 0;
  154. background-color: #cccccc;
  155. padding: 5px 15px;
  156. .sop-name {
  157. float: left;
  158. }
  159. .sop-icon-del {
  160. cursor: pointer;
  161. float: right;
  162. margin-top:3px;
  163. }
  164. }
  165. }
  166. }
  167. </style>