EvaluationPlan.vue 8.6 KB

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