list.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. <template>
  2. <basic-container>
  3. <avue-crud
  4. v-bind="bindVal"
  5. v-on="onEvent"
  6. v-model="form"
  7. :spanMethod="spanMethod"
  8. >
  9. <template slot="menuLeft">
  10. <!-- <el-button
  11. type="danger"
  12. size="small"
  13. icon="el-icon-delete"
  14. plain
  15. @click="handleDelete"
  16. >
  17. 删 除
  18. </el-button> -->
  19. <!-- <el-button
  20. type="warning"
  21. size="small"
  22. plain
  23. icon="el-icon-download"
  24. @click="handleExport"
  25. >
  26. 导出
  27. </el-button> -->
  28. <el-button
  29. type="primary"
  30. size="small"
  31. plain
  32. @click="handleDownFileAll"
  33. >
  34. 一键下载
  35. </el-button>
  36. <print-table-btn @click="printTable" />
  37. </template>
  38. <template slot="body">
  39. <h3 class="page-title">{{ pageTitle }}</h3>
  40. <year-month-select v-model="params.yearAndMonth" :showMonth="false"></year-month-select>
  41. </template>
  42. <template slot="menu" slot-scope="{ row, size }">
  43. <el-button
  44. type="text"
  45. :size="size"
  46. icon="el-icon-delete"
  47. :disabled="!row.isDel"
  48. @click="rowDel(row)"
  49. >
  50. 删 除
  51. </el-button>
  52. </template>
  53. <template slot="zdwjdzSearch">
  54. <el-input placeholder="请输入制度文件关键字" v-model="params.zdwjmc"></el-input>
  55. </template>
  56. <template slot="createTimeSearch">
  57. <el-date-picker
  58. v-model="params.createTime"
  59. type="daterange"
  60. range-separator="至"
  61. start-placeholder="开始日期"
  62. end-placeholder="结束日期"
  63. style="width: 240px !important"
  64. >
  65. </el-date-picker>
  66. </template>
  67. <template slot="zdwjdz" slot-scope="{row}">
  68. <div v-for="(item, index) of row.zdwjdz" :key="index">
  69. <el-link type="primary" @click="handleDownFile(item)">{{ item.label }}</el-link>
  70. </div>
  71. </template>
  72. <template slot="zdsszm" slot-scope="{row}">
  73. <div v-for="(item, index) of row.zdsszm" :key="index">
  74. <el-link type="primary" @click="handleDownFile(item)">{{ item.label }}</el-link>
  75. </div>
  76. </template>
  77. </avue-crud>
  78. <WideTablePrinter
  79. ref="printWideTable"
  80. :columns="wideTableColumns"
  81. :data="wideTableData"
  82. :print-title="pageTitle"
  83. :rows-per-page="30"
  84. :default-landscape="true"
  85. :zoom="95"
  86. />
  87. </basic-container>
  88. </template>
  89. <script>
  90. import {exportBloByPost, exportBlob} from "@/api/common";
  91. import YearMonthSelect from "@/components/year-month-select";
  92. import moment from "moment";
  93. import {getToken} from "@/util/auth";
  94. import {downloadXls, downloadFileByUrl} from "@/util/util";
  95. import { mapGetters } from "vuex";
  96. export default window.$crudCommon({
  97. components: {
  98. YearMonthSelect,
  99. },
  100. data() {
  101. return {
  102. params: {
  103. yearAndMonth: "",
  104. },
  105. wideTableColumns: [],
  106. wideTableData: [],
  107. };
  108. },
  109. watch: {
  110. 'params.yearAndMonth'(newVal) {
  111. this.page.currentPage = 1;
  112. this.getList(this.page);
  113. }
  114. },
  115. computed: {
  116. ...mapGetters(['tag']),
  117. pageTitle() {
  118. let yearAndMonthCN = this.params.yearAndMonth ? moment(this.params.yearAndMonth).format('yyyy年') : ''
  119. return `${yearAndMonthCN}${this.tag.label}`
  120. }
  121. },
  122. created() {
  123. this.option.column.forEach(item => {
  124. if (item.prop == 'zdwjdz') {
  125. item.uploadBefore = (file, done, loading) => {
  126. if (this.form.zdwjdz.some(item => item.label == file.name)) {
  127. this.$message.error(`${file.name}文件已存在!`);
  128. return;
  129. }
  130. done();
  131. }
  132. }
  133. if (item.prop == 'zdsszm') {
  134. item.uploadBefore = (file, done, loading) => {
  135. console.log(file.name, this.form.zdsszm)
  136. if (this.form.zdsszm.some(item => item.label == file.name)) {
  137. this.$message.error(`${file.name}文件已存在!`);
  138. return;
  139. }
  140. done();
  141. }
  142. }
  143. })
  144. },
  145. methods: {
  146. getSearchParams() {
  147. let searchParams = { ...this.params };
  148. if (!!searchParams.createTime) {
  149. searchParams.createTimeStart = searchParams.createTime[0];
  150. searchParams.createTimeEnd = searchParams.createTime[1];
  151. }
  152. return searchParams;
  153. },
  154. spanMethod({ row, column, rowIndex, columnIndex }) {
  155. let fields = ["wjlx"];
  156. let cellValue = row[column.property];
  157. if (cellValue && fields.includes(column.property)) {
  158. let prevRow = this.data[rowIndex - 1];
  159. let nextRow = this.data[rowIndex + 1];
  160. if (prevRow && prevRow[column.property] === cellValue) {
  161. return { rowspan: 0, colspan: 0 };
  162. } else {
  163. let countRowspan = 1;
  164. while (nextRow && nextRow[column.property] === cellValue) {
  165. nextRow = this.data[++countRowspan + rowIndex];
  166. }
  167. if (countRowspan > 1) {
  168. row.hbFlag = true;
  169. return { rowspan: countRowspan, colspan: 1 };
  170. }
  171. }
  172. }
  173. },
  174. getFormData() {
  175. const params = { ...this.form };
  176. let zdwjmc = [];
  177. params.zdwjdz.forEach(item => {
  178. zdwjmc.push(item.label);
  179. });
  180. params.zdwjdz = JSON.stringify(params.zdwjdz);
  181. params.zdwjmc = zdwjmc.join(',');
  182. params.zdsszm = JSON.stringify(params.zdsszm);
  183. params.yearAndMonth = this.params.yearAndMonth;
  184. return params;
  185. },
  186. handleExport() {
  187. exportBloByPost(`/api/kd-scientific/technician/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
  188. downloadXls(res.data, `${this.pageTitle}.xlsx`);
  189. });
  190. },
  191. /**
  192. * 打印表格
  193. * @param isLandscape 是否横向打印
  194. */
  195. printTable(isLandscape) {
  196. this.wideTableColumns = this.printOption.column;
  197. this.wideTableData = JSON.parse(JSON.stringify(this.$refs.crud.list)).map(item => {
  198. if (item.zdwjdz && item.zdwjdz instanceof Array) {
  199. item.zdwjdz = item.zdwjdz.map(item => item.label).join('、')
  200. }
  201. if (item.zdsszm && item.zdsszm instanceof Array) {
  202. item.zdsszm = item.zdsszm.map(item => item.label).join('、')
  203. }
  204. return item;
  205. });
  206. this.$nextTick(() => {
  207. this.$refs.printWideTable.printTable(isLandscape);
  208. })
  209. },
  210. handleDownFile(file) {
  211. downloadFileByUrl(file.value, file.label);
  212. },
  213. handleDownFileAll() {
  214. let downParams = { year: this.params.yearAndMonth };
  215. exportBlob(`/api/kd-scientific/yfzd/download?${this.website.tokenHeader}=${getToken()}`, downParams).then(res => {
  216. downloadXls(res.data, `${this.pageTitle}.zip`);
  217. });
  218. },
  219. },
  220. }, {
  221. // 模块路径
  222. name: 'RDSystemManage/list',
  223. res: ({ data }) => {
  224. let newList = [];
  225. Object.keys(data).forEach(fileType => {
  226. if (data[fileType].length) {
  227. data[fileType].forEach(item => {
  228. newList.push({
  229. wjlx: fileType,
  230. ...item,
  231. zdwjdz: !!item.zdwjdz ? JSON.parse(item.zdwjdz) : [],
  232. zdsszm: !!item.zdsszm ? JSON.parse(item.zdsszm) : [],
  233. isDel: true
  234. });
  235. });
  236. } else {
  237. newList.push({ wjlx: fileType, isDel: false, });
  238. }
  239. });
  240. data.records = newList;
  241. return data;
  242. },
  243. });
  244. </script>