operateCiteList.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  1. <template>
  2. <div class="app-container calendar-list-container">
  3. <!-- 查询和其他操作 -->
  4. <div class="filter-container">
  5. <el-select v-model="listQuery.type" clearable placeholder="表彰类型" class="filter-item" style="width: 200px">
  6. <el-option :key="item.dictValue" v-for="item in typeList" :label="item.dictLabel" :value="item.dictValue">
  7. </el-option>
  8. </el-select>
  9. <!-- <el-select v-model="listQuery.category" clearable placeholder="表彰类别" class="filter-item" style="width: 200px">
  10. <el-option :key="item.dictValue" v-for="item in categoryList" :label="item.dictLabel" :value="item.dictValue">
  11. </el-option>
  12. </el-select> -->
  13. <el-input clearable class="filter-item" style="width: 200px;" placeholder="客户名称"
  14. v-model="listQuery.customerName"></el-input>
  15. <el-input clearable class="filter-item" style="width: 200px;" placeholder="表彰名称"
  16. v-model="listQuery.title"></el-input>
  17. <el-input clearable class="filter-item" style="width: 200px;" placeholder="上传人"
  18. v-model="listQuery.userName"></el-input>
  19. <!-- <el-select v-model="listQuery.status" clearable placeholder="审批状态" style="top: -4px; width: 200px">
  20. <el-option :key="item.dictValue" v-for="item in statusTypeList" :label="item.dictLabel" :value="item.dictValue">
  21. </el-option>
  22. </el-select> -->
  23. <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
  24. <!-- <el-button class="filter-item" type="primary" v-waves icon="el-icon-download" @click="handleDownLoad">导出</el-button> -->
  25. </div>
  26. <!-- 查询结果 -->
  27. <el-table size="small" :data="list" v-loading="listLoading" element-loading-text="正在查询中。。。" border fit
  28. highlight-current-row>
  29. <el-table-column type="index" label="序号" header-align="center" align="center">
  30. </el-table-column>
  31. <el-table-column align="center" min-width="200px" label="附件">
  32. <template slot-scope="props">
  33. <div v-for="(item, index) in props.row.files" :key="index">
  34. <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
  35. </div>
  36. </template>
  37. </el-table-column>
  38. <el-table-column align="center" prop="typeName" min-width="100" label="表彰类型">
  39. </el-table-column>
  40. <!-- <el-table-column align="center" prop="categoryName" min-width="100" label="表彰类别">
  41. </el-table-column> -->
  42. <el-table-column align="center" min-width="100" label="表彰人员">
  43. <template slot-scope="props">
  44. <el-popover trigger="hover">
  45. <el-table :data="props.row.groupUsers" border size="mini">
  46. <el-table-column min-width="200" align="center" prop="deptName" label="部门"></el-table-column>
  47. <el-table-column min-width="100" align="center" prop="userName" label="姓名"></el-table-column>
  48. <el-table-column min-width="100" align="center" prop="employeNo" label="员工号"></el-table-column>
  49. </el-table>
  50. <span style="color: #1e80ff;cursor: pointer;" slot="reference">
  51. {{ props.row.userName }}
  52. </span>
  53. </el-popover>
  54. </template>
  55. </el-table-column>
  56. <el-table-column align="center" min-width="150" label="客户名称">
  57. <template slot-scope="props">
  58. <el-popover width="200" trigger="hover" :content="props.row.customerName">
  59. <div slot="reference" class="text-overflow">{{ props.row.customerName }}</div>
  60. </el-popover>
  61. </template>
  62. </el-table-column>
  63. <el-table-column align="center" min-width="150" label="表彰名称">
  64. <template slot-scope="props">
  65. <el-popover width="200" trigger="hover" :content="props.row.title">
  66. <div slot="reference" class="text-overflow">{{ props.row.title }}</div>
  67. </el-popover>
  68. </template>
  69. </el-table-column>
  70. <el-table-column min-width="100" align="center" label="表彰描述">
  71. <template slot-scope="props">
  72. <el-popover width="400" trigger="hover" :content="props.row.content">
  73. <div slot="reference" class="text-overflow">{{ props.row.content }}</div>
  74. </el-popover>
  75. </template>
  76. </el-table-column>
  77. <el-table-column align="center" min-width="250px" label="部门" prop="deptName">
  78. </el-table-column>
  79. <el-table-column align="center" min-width="80px" label="上传人" prop="userName">
  80. </el-table-column>
  81. <el-table-column align="center" min-width="80px" label="获得积分" prop="integral">
  82. </el-table-column>
  83. <el-table-column align="center" min-width="120px" label="审核状态">
  84. <template slot-scope="props">
  85. <el-popover trigger="hover">
  86. <el-table :data="props.row.logs" border size="mini">
  87. <el-table-column min-width="120" align="center" prop="auditor" label="处理人"></el-table-column>
  88. <el-table-column min-width="160" align="center" prop="comment" label="处理结果"></el-table-column>
  89. <el-table-column min-width="180" align="center" prop="createTime" label="处理时间"></el-table-column>
  90. </el-table>
  91. <span style="color: #1e80ff;cursor: pointer;" slot="reference">{{ props.row.statusName }}</span>
  92. </el-popover>
  93. </template>
  94. </el-table-column>
  95. <el-table-column align="center" min-width="100px" label="日期" prop="createTime">
  96. </el-table-column>
  97. <el-table-column align="center" label="操作" width="80px" class-name="small-padding fixed-width">
  98. <template slot-scope="scope">
  99. <el-button type="success" size="small"
  100. @click="handleClick(scope.row.id)">处理</el-button>
  101. </template>
  102. </el-table-column>
  103. </el-table>
  104. <el-dialog :close-on-click-modal="false" title="表彰审批" :visible.sync="dialogFormVisible" width="40%">
  105. <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px">
  106. <el-form-item label="表彰类别" prop="category">
  107. <el-select v-model="dataForm.category" clearable placeholder="表彰类别" class="filter-item" style="width: 100%">
  108. <el-option :key="item.dictValue" v-for="item in categoryList" :label="item.dictLabel" :value="item.dictValue">
  109. </el-option>
  110. </el-select>
  111. </el-form-item>
  112. <el-form-item label="审批内容" prop="content">
  113. <el-input type="textarea" :rows="2" placeholder="请输入审批内容" v-model="dataForm.content"></el-input>
  114. </el-form-item>
  115. </el-form>
  116. <div slot="footer" class="dialog-footer">
  117. <el-button type="primary" @click="complete(true)">同意</el-button>
  118. <el-button type="danger" @click="complete(false)">驳回</el-button>
  119. </div>
  120. </el-dialog>
  121. <!-- 分页 -->
  122. <div class="pagination-container">
  123. <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
  124. :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
  125. layout="total, sizes, prev, pager, next, jumper" :total="total">
  126. </el-pagination>
  127. </div>
  128. </div>
  129. </template>
  130. <style>
  131. .text-overflow {
  132. overflow: hidden;
  133. text-overflow: ellipsis;
  134. display: -webkit-box;
  135. -webkit-box-orient: vertical;
  136. -webkit-line-clamp: 1;
  137. }
  138. .demo-table-expand {
  139. font-size: 0;
  140. }
  141. .demo-table-expand label {
  142. width: 200px;
  143. color: #99a9bf;
  144. }
  145. .demo-table-expand .el-form-item {
  146. margin-right: 0;
  147. margin-bottom: 0;
  148. }
  149. </style>
  150. <script>
  151. import {
  152. complete,
  153. customerPage,
  154. } from "@/api/commendManage.js";
  155. import { dataTypeList } from "@/api/public";
  156. import waves from "@/directive/waves"; // 水波纹指令
  157. import Tinymce from "@/components/Tinymce";
  158. export default {
  159. components: { Tinymce },
  160. directives: { waves },
  161. data() {
  162. return {
  163. id:'',
  164. dataForm: {
  165. category: '',
  166. content: ''
  167. },
  168. rules: {
  169. category: [{ required: true, message: "请选择表彰类别", trigger: "blur" }],
  170. },
  171. dialogFormVisible: false,
  172. dialogVisible: false,
  173. categoryList: [],
  174. typeList: [],
  175. statusTypeList: [],
  176. list: [],
  177. total: 0,
  178. listLoading: false,
  179. listQuery: {
  180. page: 1,
  181. limit: 10,
  182. type: '',
  183. category: '',
  184. customerName: '',
  185. title: '',
  186. userName: '',
  187. status: "10",
  188. },
  189. };
  190. },
  191. created() {
  192. this.getTypeList();
  193. this.getCategoryList();
  194. this.getStatusTypeList();
  195. this.getList();
  196. },
  197. methods: {
  198. checked(val){
  199. if(val.flag == false){
  200. if(!val.content){
  201. this.$alert("请输入审批内容", "提示", {
  202. confirmButtonText: "确定",
  203. });
  204. return false;
  205. }
  206. }
  207. if(val.flag == true){
  208. if(!val.category){
  209. this.$alert("请选择表彰类别", "提示", {
  210. confirmButtonText: "确定",
  211. });
  212. return false;
  213. }
  214. }
  215. return true;
  216. },
  217. complete(flag) {
  218. const parms = {
  219. id:this.id,
  220. category:this.dataForm.category,
  221. content: this.dataForm.content,
  222. flag:flag,
  223. }
  224. const isChecked = this.checked(parms);
  225. if(isChecked){
  226. complete(parms).then((response) => {
  227. this.$notify({
  228. title: "成功",
  229. message: "操作成功",
  230. type: "success",
  231. duration: 2000,
  232. });
  233. this.dialogFormVisible = false;
  234. this.getList();
  235. })
  236. .catch(() => { });
  237. }
  238. },
  239. handleClick(id) {
  240. this.dialogFormVisible = true;
  241. this.id = id;
  242. this.$nextTick(() => {
  243. this.dataForm.category = '';
  244. this.dataForm.content = '';
  245. this.$refs["dataForm"].clearValidate();
  246. });
  247. },
  248. getCategoryList() {
  249. dataTypeList({ dictType: 'customer_treward_category' }).then(response => {
  250. this.categoryList = response.data.data;
  251. }).catch(() => { });
  252. },
  253. getTypeList() {
  254. dataTypeList({ dictType: 'customer_treward_type' }).then(response => {
  255. this.typeList = response.data.data;
  256. }).catch(() => { });
  257. },
  258. getStatusTypeList() {
  259. dataTypeList({ dictType: 'customer_treward_status' }).then(response => {
  260. this.statusTypeList = response.data.data;
  261. }).catch(() => { });
  262. },
  263. handleDownLoad() {
  264. window.location.href = process.env.BASE_API + '/mall-integral-obtain/export/certificate?name=' + this.listQuery.name + '&title=' + this.listQuery.title + '&userName=' + this.listQuery.userName + '&status=' + this.listQuery.status;
  265. },
  266. getList() {
  267. this.listLoading = true;
  268. customerPage(this.listQuery)
  269. .then((response) => {
  270. this.list = response.data.data.items;
  271. this.total = response.data.data.total;
  272. this.listLoading = false;
  273. })
  274. .catch(() => {
  275. this.list = [];
  276. this.total = 0;
  277. this.listLoading = false;
  278. });
  279. },
  280. handleFilter() {
  281. this.listQuery.page = 1;
  282. this.getList();
  283. },
  284. handleSizeChange(val) {
  285. this.listQuery.limit = val;
  286. this.getList();
  287. },
  288. handleCurrentChange(val) {
  289. this.listQuery.page = val;
  290. this.getList();
  291. },
  292. },
  293. };
  294. </script>
  295. <style>
  296. .ad-avatar-uploader .el-upload {
  297. border: 1px dashed #d9d9d9;
  298. border-radius: 6px;
  299. cursor: pointer;
  300. position: relative;
  301. overflow: hidden;
  302. }
  303. .ad-avatar-uploader .el-upload:hover {
  304. border-color: #409eff;
  305. }
  306. .ad-avatar-uploader-icon {
  307. font-size: 28px;
  308. color: #8c939d;
  309. width: 178px;
  310. height: 178px;
  311. line-height: 178px;
  312. text-align: center;
  313. }
  314. .ad-avatar {
  315. display: block;
  316. }
  317. </style>