SetEvaItemModal.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <template>
  2. <div>
  3. <a-modal
  4. class="modalBox"
  5. :footer="null"
  6. title="设置考评指标"
  7. v-model="isshow"
  8. @cancle="cancel"
  9. :width="'60%'">
  10. <a-row :gutter="24" class="header">
  11. <span>请给考评项目为【{{ itemName }}】设置考评指标</span>
  12. <a-button id="setEvaItemModal-add" type="primary" @click="openModal">新增</a-button>
  13. </a-row>
  14. <a-table
  15. ref="table"
  16. size="default"
  17. :pagination="false"
  18. :rowKey="(record) => record.id"
  19. :columns="columns"
  20. :dataSource="list"
  21. bordered>
  22. <!-- 操作 -->
  23. <template slot="action" slot-scope="text, record">
  24. <a-icon id="setEvaItemModal-edit" type="edit" class="actionBtn blue" @click="openModal(record)" />
  25. <a-icon id="setEvaItemModal-delete" type="delete" class="actionBtn red" @click="delect(record)" />
  26. </template>
  27. </a-table>
  28. <!-- 新增/编辑 弹窗 -->
  29. <add-evaIndexModal :itemId="itemId" :itemIndexId="itemIndexId" :visible="openAddModal" @refresh="getList" @close="openAddModal=false"></add-evaIndexModal>
  30. </a-modal>
  31. </div>
  32. </template>
  33. <script>
  34. import {
  35. itemIndexQuery,
  36. itemIndexDelete
  37. } from '@/api/evaluationItem.js'
  38. import addEvaIndexModal from './AddEvaIndexModal.vue'
  39. export default {
  40. name: 'SetEvaItemModal',
  41. components: {
  42. addEvaIndexModal
  43. },
  44. props: {
  45. visible: {
  46. type: Boolean,
  47. default: false
  48. },
  49. // 要编辑的考评项id
  50. itemId: {
  51. type: [String, Number],
  52. default: ''
  53. },
  54. // 要编辑的考评项名称
  55. itemName: {
  56. type: String,
  57. default: ''
  58. }
  59. },
  60. watch: {
  61. visible (newValue, oldValue) {
  62. this.isshow = newValue
  63. },
  64. isshow (newValue, oldValue) {
  65. if (newValue) {
  66. this.getList()
  67. } else {
  68. this.cancel()
  69. }
  70. }
  71. },
  72. data () {
  73. return {
  74. isshow: this.visible, // 弹框显示隐藏
  75. openAddModal: false, // 是否打开编辑/新增弹框
  76. itemIndexId: '', // 考评指标id
  77. // 表头
  78. columns: [{
  79. title: '序号',
  80. dataIndex: 'no',
  81. width: '40',
  82. align: 'center'
  83. },
  84. {
  85. title: '考评指标名称',
  86. dataIndex: 'name',
  87. align: 'center'
  88. },
  89. {
  90. title: '操作',
  91. width: '200',
  92. align: 'center',
  93. scopedSlots: {
  94. customRender: 'action'
  95. }
  96. }
  97. ],
  98. list: []
  99. }
  100. },
  101. computed: {},
  102. methods: {
  103. // 获取列表数据
  104. getList () {
  105. itemIndexQuery({
  106. assessItemId: this.itemId
  107. }).then(res => {
  108. if (res.status == 200) {
  109. res.data.map((item, index) => {
  110. item.no = index + 1
  111. })
  112. this.list = res.data
  113. } else {
  114. this.list = []
  115. }
  116. })
  117. },
  118. // 点击弹框x号触发事件
  119. cancel (e) {
  120. this.$emit('close')
  121. },
  122. // 打开新增/编辑 弹窗
  123. openModal (row) {
  124. this.itemIndexId = row ? row.id : ''
  125. this.openAddModal = true
  126. },
  127. // 删除考评指标
  128. delect (row) {
  129. const _this = this
  130. this.$confirm({
  131. title: '警告',
  132. content: '删除后原数据不可恢复,是否删除?',
  133. okText: '确定',
  134. cancelText: '取消',
  135. onOk () {
  136. itemIndexDelete({
  137. id: row.id
  138. }).then(res => {
  139. if (res.status == 200) {
  140. _this.$message.success(res.message)
  141. _this.getList()
  142. }
  143. })
  144. }
  145. })
  146. }
  147. },
  148. beforeCreate () {
  149. this.form = this.$form.createForm(this, {
  150. name: 'SetEvaItemModal'
  151. })
  152. }
  153. }
  154. </script>
  155. <style scoped>
  156. .header {
  157. font-size: 16px;
  158. font-weight: 600;
  159. margin-bottom: 20px;
  160. }
  161. .header span {
  162. margin-right: 20px;
  163. }
  164. .actionBtn {
  165. font-size: 20px;
  166. padding: 0 10px;
  167. }
  168. .blue {
  169. color: #1890FF;
  170. }
  171. .red {
  172. color: red;
  173. }
  174. </style>