EvaluationItem.vue 6.8 KB

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