EvaluationItem.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. <template>
  2. <a-card :bordered="false">
  3. <div class="table-page-search-wrapper">
  4. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  5. <a-row :gutter="48">
  6. <a-col :span="6">
  7. <a-form-item label="考评项目名称">
  8. <a-input id="evaluationItem-name" allowClear v-model.trim="queryParam.name" placeholder="请输入考评项目名称" />
  9. </a-form-item>
  10. </a-col>
  11. <a-col :span="6">
  12. <a-form-item label="启用状态">
  13. <v-select
  14. id="evaluationItem-status"
  15. ref="status"
  16. allowClear
  17. placeholder="状态"
  18. v-model="queryParam.status"
  19. code="ENABLE_FLAG"></v-select>
  20. </a-form-item>
  21. </a-col>
  22. <a-col :span="6">
  23. <a-button id="evaluationItem-search" type="primary" style="margin-right: 10px;" @click="$refs.table.refresh(true)">查询</a-button>
  24. <a-button id="evaluationItem-reset" type="" @click="reset">重置</a-button>
  25. </a-col>
  26. </a-row>
  27. </a-form>
  28. </div>
  29. <a-divider />
  30. <div class="table-operator">
  31. <a-button id="evaluationItem-add" type="primary" icon="plus" @click="openModal">新增</a-button>
  32. </div>
  33. <s-table
  34. ref="table"
  35. size="default"
  36. :rowKey="(record) => record.id"
  37. :columns="columns"
  38. :data="loadData"
  39. bordered>
  40. <!-- 操作 -->
  41. <template slot="action" slot-scope="text, record">
  42. <a-icon id="evaluationItem-setting" title="设置考评指标" type="setting" class="actionBtn icon-orange" @click="handleSet(record)" />
  43. <a-icon
  44. id="evaluationItem-edit"
  45. type="edit"
  46. title="编辑"
  47. class="actionBtn icon-blues"
  48. v-if="record.status == '0'"
  49. @click="openModal(record)" />
  50. <a-icon
  51. id="evaluationItem-delete"
  52. title="删除"
  53. type="delete"
  54. class="actionBtn icon-red"
  55. v-if="record.status == '0'"
  56. @click="delect(record)" />
  57. </template>
  58. <!-- 启用禁用 -->
  59. <template slot="enable" slot-scope="text, row">
  60. <a-switch id="evaluationItem-enableStatus" checkedChildren="启用" unCheckedChildren="禁用" v-model="row.status" @change="changeFlagHandle(row)" />
  61. </template>
  62. </s-table>
  63. <!-- 新增/编辑 弹窗 -->
  64. <add-evaItemModal :itemId="itemId" :visible="openAddModal" @refresh="reset" @close="openAddModal=false"></add-evaItemModal>
  65. <!-- 设置弹窗 -->
  66. <set-evaItemModal :itemId="itemId" :itemName="itemName" :visible="openSetting" @close="openSetting=false"></set-evaItemModal>
  67. </a-card>
  68. </template>
  69. <script>
  70. import {
  71. STable,
  72. VSelect
  73. } from '@/components'
  74. import {
  75. getItemListByPage,
  76. itemDelete,
  77. itemEnable
  78. } from '@/api/evaluationItem.js'
  79. import addEvaItemModal from './AddEvaItemModal.vue'
  80. import setEvaItemModal from './SetEvaItemModal.vue'
  81. import moment from 'moment'
  82. export default {
  83. name: 'EvaluationPlanList',
  84. components: {
  85. STable,
  86. VSelect,
  87. addEvaItemModal,
  88. setEvaItemModal
  89. },
  90. data () {
  91. return {
  92. moment,
  93. pageNo: 1,
  94. pageSize: 10,
  95. openAddModal: false, // 打开新增弹窗
  96. openSetting: false, // 打开设置弹窗
  97. itemId: '', // 要编辑的考评项id
  98. itemName: '', // 要编辑的考评项名称
  99. // 查询参数
  100. queryParam: {
  101. name: '', // 项目名称
  102. status: '' // 状态
  103. },
  104. // 表头
  105. columns: [{
  106. title: '序号',
  107. dataIndex: 'no',
  108. width: 60,
  109. align: 'center'
  110. },
  111. {
  112. title: '考评项目名称',
  113. dataIndex: 'name',
  114. width: 200,
  115. align: 'center'
  116. },
  117. {
  118. title: '考评项目说明',
  119. dataIndex: 'desc',
  120. width: 300,
  121. align: 'center',
  122. customRender: (text) => {
  123. return text || '--'
  124. }
  125. },
  126. {
  127. title: '状态',
  128. width: 150,
  129. align: 'center',
  130. dataIndex: 'status',
  131. scopedSlots: {
  132. customRender: 'enable'
  133. }
  134. },
  135. {
  136. title: '操作',
  137. width: 200,
  138. align: 'center',
  139. scopedSlots: {
  140. customRender: 'action'
  141. }
  142. }
  143. ],
  144. // 加载数据方法 必须为 Promise 对象
  145. loadData: parameter => {
  146. return getItemListByPage(Object.assign(parameter, this.queryParam)).then(res => {
  147. if (res.status == 200) {
  148. const no = (res.data.pageNo - 1) * res.data.pageSize
  149. for (let i = 0; i < res.data.list.length; i++) {
  150. const _item = res.data.list[i]
  151. _item.no = no + i + 1
  152. _item.status = _item.status + '' === '1'
  153. }
  154. res.data.count = Number(res.data.count)
  155. return res.data
  156. }
  157. })
  158. }
  159. }
  160. },
  161. beforeRouteEnter (to, from, next) {
  162. next(vm => {
  163. vm.reset()
  164. })
  165. },
  166. methods: {
  167. // 修改状态
  168. changeFlagHandle (record) {
  169. // console.log(record, '222222222')
  170. const _data = {
  171. id: record.id,
  172. status: record.status ? '1' : '0'
  173. }
  174. itemEnable(_data).then(res => {
  175. console.log(res.status)
  176. if (res.status == '200') {
  177. this.$message.success(res.message)
  178. this.$refs.table.refresh()
  179. } else {
  180. record.status = !record.status
  181. }
  182. })
  183. },
  184. // 打开新增弹窗
  185. openModal (row) {
  186. this.itemId = row ? row.id : ''
  187. this.openAddModal = true
  188. },
  189. // 删除
  190. delect (row) {
  191. const _this = this
  192. this.$confirm({
  193. title: '警告',
  194. centered: true,
  195. content: '删除考评项目时,其关联的考评指标将被同步删除,确认删除吗?',
  196. okText: '确定',
  197. cancelText: '取消',
  198. onOk () {
  199. itemDelete({
  200. id: row.id
  201. }).then(res => {
  202. if (res.status == 200) {
  203. _this.$message.success(res.message)
  204. _this.$refs.table.refresh()
  205. }
  206. })
  207. }
  208. })
  209. },
  210. // 打开设置弹框
  211. handleSet (row) {
  212. this.openSetting = true
  213. this.itemId = row.id
  214. this.itemName = row.name
  215. },
  216. // 重置
  217. reset () {
  218. this.queryParam = {
  219. name: '',
  220. status: '' // 状态
  221. }
  222. this.$refs.table.refresh(true)
  223. }
  224. }
  225. }
  226. </script>
  227. <style>
  228. .table-page-search-wrapper,
  229. .addButton {
  230. margin-bottom: 0;
  231. }
  232. .table-page-search-wrapper .ant-form-inline .ant-form-item {
  233. margin-bottom: 10px;
  234. }
  235. .table-operator {
  236. margin-bottom: 10px;
  237. }
  238. .textCount {
  239. border: 1px solid #91d5ff;
  240. background-color: #e6f7ff;
  241. padding: 10px 0;
  242. border-radius: 5px;
  243. padding-left: 20px;
  244. margin: 10px 0;
  245. }
  246. .action-button {
  247. line-height: 40px;
  248. white-space: nowrap;
  249. padding: 5px 10px;
  250. background-color: #1890ff;
  251. border-radius: 4px;
  252. color: #fff;
  253. margin-right: 5px;
  254. }
  255. .menu-text {
  256. background-color: #f90;
  257. }
  258. </style>