SetEvaItemModal.vue 4.1 KB

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