EvaluationPlan.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  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="evaluationPlan-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="evaluationPlan-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="evaluationPlan-search" type="primary" style="margin-right: 10px;" @click="$refs.table.refresh(true)">查询</a-button>
  24. <a-button id="evaluationPlan-reset" type="" @click="reset">重置</a-button>
  25. </a-col>
  26. </a-row>
  27. </a-form>
  28. </div>
  29. <a-divider />
  30. <a-row class="add-btn" type="flex" justify="space-between">
  31. <a-button v-hasPermission="'B_evaluationPlan_add'" id="evaluationPlan-add" type="primary" icon="plus" @click="openModal">新增</a-button>
  32. <a-col v-hasPermission="'M_evaluationPlan_default'" id="evaluationPlan-setDefaultPlan" @click="handleDefaultSet">
  33. <a-icon type="setting" class="setting-icon" />
  34. <span class="setting">默认方案设置</span>
  35. </a-col>
  36. </a-row>
  37. <s-table
  38. ref="table"
  39. size="default"
  40. :rowKey="(record) => record.id"
  41. :columns="columns"
  42. :data="loadData"
  43. bordered>
  44. <!-- 操作 -->
  45. <template slot="action" slot-scope="text, record">
  46. <a-icon
  47. v-hasPermission="'M_evaluationPlan_setItem'"
  48. title="选择考评项目"
  49. id="evaluationPlan-setting"
  50. type="setting"
  51. class="actionBtn icon-orange"
  52. @click="handleSet(record)" />
  53. <a-icon
  54. id="evaluationPlan-edit"
  55. title="编辑"
  56. type="edit"
  57. class="actionBtn icon-blues"
  58. v-if="record.status == '0' && $hasPermissions('M_evaluationPlan_edit')"
  59. @click="openModal(record)" />
  60. <a-icon
  61. id="evaluationPlan-delete"
  62. title="删除"
  63. type="delete"
  64. class="actionBtn icon-red"
  65. v-if="record.status == '0' && $hasPermissions('B_evaluationPlan_del')"
  66. @click="delect(record)" />
  67. <span v-if="(!$hasPermissions('M_evaluationPlan_edit') && !$hasPermissions('B_evaluationPlan_del') && !$hasPermissions('M_evaluationPlan_setItem'))||(record.status == '1' && !$hasPermissions('M_evaluationPlan_setItem'))">--</span>
  68. </template>
  69. <!-- 启用禁用 -->
  70. <template slot="enable" slot-scope="text, row">
  71. <a-switch
  72. v-if="$hasPermissions('B_evaluationPlan_enable')"
  73. id="evaluationPlan-enableStatus"
  74. checkedChildren="启用"
  75. unCheckedChildren="禁用"
  76. v-model="row.status"
  77. @change="changeFlagHandle(row)" />
  78. <span v-else :class="[text==1 ? 'green' : 'red']">{{ text==1 ? '已启用' : '已禁用' }}</span>
  79. </template>
  80. </s-table>
  81. <!-- 新增/编辑 弹窗 -->
  82. <add-evaModal :itemId="itemId" :visible="openAddModal" @refresh="reset" @close="openAddModal=false"></add-evaModal>
  83. <!-- 选择考评项弹窗 -->
  84. <set-evaModal :itemId="itemId" :itemName="itemName" :visible="openSetting" @close="openSetting=false"></set-evaModal>
  85. <!-- 设置默认方案弹窗 -->
  86. <set-evaDefaultModal :itemId="itemId" :defaultPlanList="defaultPlanList" :visible="openDefaultSetting" @refresh="getDefaultPlan" @close="openDefaultSetting=false"></set-evaDefaultModal>
  87. </a-card>
  88. </template>
  89. <script>
  90. import {
  91. STable,
  92. VSelect
  93. } from '@/components'
  94. import {
  95. planQueryByPage,
  96. planEnable,
  97. planDefaultQuery,
  98. planDelete
  99. } from '@/api/evaluationPlan.js'
  100. import addEvaModal from './AddEvaModal.vue'
  101. import setEvaModal from './SetEvaModal.vue'
  102. import setEvaDefaultModal from './SetEvaDefaultModal.vue'
  103. export default {
  104. name: 'EvaluationPlanList',
  105. components: {
  106. STable,
  107. VSelect,
  108. addEvaModal,
  109. setEvaModal,
  110. setEvaDefaultModal
  111. },
  112. data () {
  113. return {
  114. pageNo: 1,
  115. pageSize: 10,
  116. openAddModal: false, // 打开新增弹窗
  117. openSetting: false, // 打开选择考评项弹窗
  118. openDefaultSetting: false, // 打开设置默认方案弹窗
  119. itemId: '', // 要编辑的方案id
  120. itemName: '', // 方案名称
  121. defaultPlanList: [], // 默认方案列表
  122. // 查询参数
  123. queryParam: {
  124. name: '',
  125. status: '' // 状态
  126. },
  127. // 表头
  128. columns: [{
  129. title: '序号',
  130. dataIndex: 'no',
  131. width: 60,
  132. align: 'center'
  133. },
  134. {
  135. title: '考评方案名称',
  136. dataIndex: 'name',
  137. width: 200,
  138. align: 'center'
  139. },
  140. {
  141. title: '考评方案说明',
  142. dataIndex: 'desc',
  143. width: 300,
  144. align: 'center',
  145. customRender: (text) => {
  146. return text || '--'
  147. }
  148. },
  149. {
  150. title: '适用模式',
  151. width: 200,
  152. align: 'center',
  153. dataIndex: 'scopeTypeDictValue'
  154. },
  155. {
  156. title: '状态',
  157. width: 150,
  158. align: 'center',
  159. dataIndex: 'status',
  160. scopedSlots: {
  161. customRender: 'enable'
  162. }
  163. },
  164. {
  165. title: '操作',
  166. width: 200,
  167. align: 'center',
  168. scopedSlots: {
  169. customRender: 'action'
  170. }
  171. }
  172. ],
  173. // 加载数据方法 必须为 Promise 对象
  174. loadData: parameter => {
  175. return planQueryByPage(Object.assign(parameter, this.queryParam)).then(res => {
  176. if (res.status == 200) {
  177. const no = (res.data.pageNo - 1) * res.data.pageSize
  178. for (let i = 0; i < res.data.list.length; i++) {
  179. const _item = res.data.list[i]
  180. _item.no = no + i + 1
  181. _item.status = _item.status + '' === '1'
  182. }
  183. return res.data
  184. }
  185. })
  186. }
  187. }
  188. },
  189. beforeRouteEnter (to, from, next) {
  190. next(vm => {
  191. vm.reset()
  192. vm.getDefaultPlan()
  193. })
  194. },
  195. methods: {
  196. // 默认方案查询
  197. getDefaultPlan () {
  198. planDefaultQuery().then(res => {
  199. // console.log(res, 'rrrrrrrr')
  200. if (res.status == 200) {
  201. this.defaultPlanList = res.data
  202. } else {
  203. this.defaultPlanList = []
  204. }
  205. })
  206. },
  207. // 修改状态
  208. changeFlagHandle (record) {
  209. const _data = {
  210. id: record.id,
  211. status: record.status ? '1' : '0'
  212. }
  213. planEnable(_data).then(res => {
  214. console.log(res.status)
  215. if (res.status == '200') {
  216. this.$message.success('修改成功')
  217. this.$refs.table.refresh()
  218. } else {
  219. record.status = !record.status
  220. }
  221. })
  222. },
  223. // 打开新增弹窗
  224. openModal (row) {
  225. this.itemId = row ? row.id : ''
  226. this.openAddModal = true
  227. },
  228. // 打开默认方案设置弹窗
  229. handleDefaultSet () {
  230. this.openDefaultSetting = true
  231. },
  232. // 删除
  233. delect (row) {
  234. const _this = this
  235. // 判断当前方案是否为默认方案
  236. const has = this.defaultPlanList.find(item => item.assessId == row.id)
  237. if (has) {
  238. this.$warning({
  239. title: '警告',
  240. centered: true,
  241. content: '该考评方案为当前默认考评方案,不能删除,请取消该方案的默认后再进行删除!'
  242. })
  243. } else {
  244. this.$confirm({
  245. title: '警告',
  246. centered: true,
  247. content: '删除后原数据不可恢复,是否删除?',
  248. okText: '确定',
  249. cancelText: '取消',
  250. onOk () {
  251. planDelete({
  252. id: row.id
  253. }).then(res => {
  254. if (res.status == 200) {
  255. _this.$message.success(res.message)
  256. _this.$refs.table.refresh()
  257. }
  258. })
  259. }
  260. })
  261. }
  262. },
  263. // 打开设置弹框
  264. handleSet (row) {
  265. this.itemId = row.id
  266. this.itemName = row.name
  267. this.openSetting = true
  268. console.log(this.openSetting)
  269. },
  270. // 重置
  271. reset () {
  272. this.queryParam = {
  273. name: '',
  274. status: '' // 状态
  275. }
  276. this.$refs.table.refresh(true)
  277. }
  278. }
  279. }
  280. </script>
  281. <style scoped>
  282. .table-page-search-wrapper,
  283. .addButton {
  284. margin-bottom: 0;
  285. }
  286. .table-page-search-wrapper .ant-form-inline .ant-form-item {
  287. margin-bottom: 10px;
  288. }
  289. .add-btn {
  290. margin-bottom: 10px;
  291. }
  292. .setting-icon {
  293. font-size: 16px;
  294. margin-right: 5px;
  295. color: #1890FF;
  296. }
  297. .setting {
  298. font-size: 16px;
  299. color: #1890FF;
  300. border-bottom: 1px solid #1890FF;
  301. cursor: pointer;
  302. }
  303. </style>