index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. <template>
  2. <div id="workSpace">
  3. <el-card style="position: relative">
  4. <el-form label-width="100px">
  5. <el-row :gutter="10">
  6. <el-col :span="1.5">
  7. <el-form-item label="单据标题">
  8. <el-input
  9. v-model.trim="queryParams.docSubject"
  10. :size="size"
  11. clearable
  12. style="width: 200px"
  13. />
  14. </el-form-item>
  15. </el-col>
  16. <el-col :span="1.5">
  17. <el-form-item label="单据类型">
  18. <el-select
  19. multiple
  20. v-model="queryParams.modelIds"
  21. :size="size"
  22. style="width: 200px"
  23. clearable
  24. >
  25. <el-option
  26. v-for="dict in dict.type.oa_templete_id"
  27. :prop="dict.value"
  28. :label="dict.label"
  29. :value="dict.value"
  30. >
  31. </el-option>
  32. </el-select>
  33. </el-form-item>
  34. </el-col>
  35. </el-row>
  36. </el-form>
  37. <div style="position: absolute; top: 18px; right: 10px">
  38. <el-button type="primary" :size="size" @click="searchList"
  39. >搜索</el-button
  40. >
  41. <el-button :size="size" plain @click="resetList">重置</el-button>
  42. </div>
  43. <el-table
  44. fit
  45. :data="tableList"
  46. :cell-style="{ borderColor: '#c0c0c0' }"
  47. :header-cell-style="{ borderColor: '#c0c0c0' }"
  48. class="exporttable"
  49. max-height="410"
  50. border
  51. highlight-current-row
  52. style="font-size: 12px"
  53. @selection-change="(selection) => (ids = selection)"
  54. @row-click="rowSelect"
  55. @row-dblclick="doubleClick"
  56. ref="tables"
  57. >
  58. <el-table-column
  59. label="序号"
  60. type="index"
  61. align="center"
  62. width="50px"
  63. />
  64. <el-table-column
  65. show-overflow-tooltip
  66. label="标题"
  67. align="center"
  68. prop="docSubject"
  69. />
  70. <el-table-column
  71. show-overflow-tooltip
  72. label="创建人"
  73. align="center"
  74. prop="docCreate"
  75. width="100px"
  76. />
  77. <el-table-column fixed="right" label="操作" align="center" width="180">
  78. <template slot-scope="scope">
  79. <el-button type="text" :size="size" @click.stop="check(scope.row)"
  80. >查看</el-button
  81. >
  82. <el-button type="text" :size="size" @click.stop="audit(scope.row)"
  83. >审批</el-button
  84. >
  85. <!-- <el-button type="text" :size="size" @click.stop="reject(scope.row)"
  86. >驳回</el-button
  87. > -->
  88. </template>
  89. </el-table-column>
  90. </el-table>
  91. <pagination
  92. :total="page.total"
  93. :page.sync="page.pageNum"
  94. :limit.sync="page.pageSize"
  95. @pagination="getList({ ...page, ...queryParams })"
  96. style="height: 32px; padding: 0 !important; flex: 1; overflow-x: auto"
  97. />
  98. <el-card class="box-card" style="margin-top: 10px">
  99. <div slot="header" class="clearfix" style="line-height: 38px">
  100. <span>单据概述</span>
  101. </div>
  102. <el-table
  103. v-if="cols.length !== 0"
  104. v-loading="loading"
  105. :data="sonTableList"
  106. fit
  107. :cell-style="{ borderColor: '#c0c0c0' }"
  108. :header-cell-style="{ borderColor: '#c0c0c0' }"
  109. class="exporttable"
  110. max-height="410"
  111. border
  112. highlight-current-row
  113. style="font-size: 12px"
  114. >
  115. <el-table-column
  116. label="序号"
  117. type="index"
  118. align="center"
  119. width="50px"
  120. />
  121. <el-table-column
  122. v-for="(col, index) in cols"
  123. :prop="col.prop"
  124. :label="col.label"
  125. :width="col.width"
  126. :formatter="col.formatter"
  127. >
  128. <template slot-scope="scope">
  129. <template v-if="col.attr">
  130. <component
  131. v-if="col.attr.is === 'el-dict-tag'"
  132. v-bind="col.attr"
  133. :size="$attrs.size"
  134. :value="scope.row[col.prop]"
  135. :options="dict.type[col.attr.dictName]"
  136. ></component>
  137. </template>
  138. <template v-else>
  139. <component v-if="col.formatter" is="span">{{
  140. col.formatter(scope.row)
  141. }}</component>
  142. <component v-else is="span">{{
  143. scope.row[col.prop]
  144. }}</component>
  145. </template>
  146. </template>
  147. </el-table-column>
  148. </el-table>
  149. <pagination
  150. :total="sonTotal"
  151. :page.sync="sonQuery.pageNum"
  152. :limit.sync="sonQuery.pageSize"
  153. @pagination="getDetailList(checkRow)"
  154. style="height: 32px; padding: 0 !important; flex: 1; overflow-x: auto"
  155. />
  156. </el-card>
  157. </el-card>
  158. </div>
  159. </template>
  160. <script>
  161. import {
  162. getWorkSpaceList,
  163. auditWork,
  164. getWorkDetailList,
  165. } from "@/api/purchase/workSpace.js";
  166. import RULE from "./columns";
  167. import { dicts } from "./dicts";
  168. export default {
  169. name: "workSpace",
  170. dicts: [...dicts, "oa_templete_id"],
  171. components: {
  172. ElDictTag: () => import("@/components/DictTag/index.vue"),
  173. },
  174. data() {
  175. const page = this.$init.page();
  176. const columns = RULE;
  177. return {
  178. page: page,
  179. Columns: columns,
  180. size: "mini",
  181. queryParams: {
  182. modelIds: [],
  183. docSubject: "",
  184. },
  185. loading: false,
  186. tableList: [],
  187. ids: [],
  188. sonTableList: [],
  189. sonQuery: {
  190. pageNum: 1,
  191. pageSize: 10,
  192. },
  193. sonTotal: 0,
  194. checkRow: {
  195. billCode: "",
  196. type: "",
  197. },
  198. cols: [],
  199. // 记录点击行的下标
  200. recordIndex: "",
  201. };
  202. },
  203. created() {
  204. this.resetList();
  205. },
  206. methods: {
  207. async getList(params) {
  208. try {
  209. this.$modal.loading("加载中...");
  210. let { code, rows, total } = await getWorkSpaceList(params);
  211. if (code === 200) {
  212. this.tableList = rows;
  213. this.page.total = total;
  214. }
  215. } catch (error) {
  216. } finally {
  217. this.$modal.closeLoading();
  218. }
  219. },
  220. searchList() {
  221. let { page, queryParams } = this;
  222. this.getList({ ...page, ...queryParams });
  223. },
  224. resetList() {
  225. this.queryParams = {
  226. modelIds: [],
  227. docSubject: "",
  228. };
  229. this.page = this.$init.page();
  230. this.searchList();
  231. },
  232. doubleClick(row) {
  233. this.rowSelect(row);
  234. },
  235. rowSelect(row, column, event) {
  236. // this.recordIndex = this.tableList.findIndex((value, index ,arr) => {
  237. // return value.billCode == row.billCode
  238. // })
  239. // this.check(row)
  240. // 选择行存储便于子表分页
  241. this.checkRow = row;
  242. this.cols = [...this.Columns[row.type]];
  243. this.getDetailList(this.checkRow);
  244. },
  245. audits() {
  246. if (this.ids.length == 0) {
  247. this.$modal.notifyWarning("请选中至少一条数据");
  248. } else {
  249. this.$modal
  250. .confirm("确认审批选中单据?")
  251. .then(() => {
  252. this.$modal.loading("审批中...");
  253. auditWork(this.ids).then((res) => {
  254. if (res.code === 200) {
  255. this.$modal.closeLoading();
  256. this.$modal.notifySuccess("审批成功");
  257. this.searchList();
  258. this.sonTableList = [];
  259. }
  260. });
  261. })
  262. .catch(() => {
  263. this.$modal.closeLoading();
  264. this.searchList();
  265. this.sonTableList = [];
  266. });
  267. }
  268. },
  269. check(row) {
  270. console.log(row);
  271. this.$router.push({
  272. path: row.linkUrl,
  273. query: { billCode: row.billCode },
  274. });
  275. },
  276. audit(row) {
  277. this.$modal.loading("审批中...");
  278. auditWork([row])
  279. .then((res) => {
  280. if (res.code === 200) {
  281. this.$modal.closeLoading();
  282. this.$modal.notifySuccess("审批成功");
  283. this.searchList();
  284. this.sonTableList = [];
  285. }
  286. })
  287. // .then(() => {
  288. // this.$refs.tables.setCurrentRow(this.tableList[this.recordIndex])
  289. // let param = {
  290. // billCode: this.tableList[this.recordIndex].billCode,
  291. // type: this.tableList[this.recordIndex].type,
  292. // ...this.sonQuery
  293. // }
  294. // getWorkDetailList(param).then(res => {
  295. // if(res.code === 200) {
  296. // this.sonTableList = res.rows
  297. // this.sonTotal = res.total
  298. // }
  299. // }).catch(err => {
  300. // })
  301. // })
  302. .catch(() => {
  303. this.$modal.closeLoading();
  304. this.searchList();
  305. this.sonTableList = [];
  306. });
  307. },
  308. // 驳回
  309. reject(row) {
  310. this.$prompt(
  311. "<div>请填写驳回原因 <span style='color:#ff6262'>注:只能驳回到起草节点</span></div>",
  312. "提示",
  313. {
  314. confirmButtonText: "确定",
  315. cancelButtonText: "取消",
  316. inputPattern: /\s*\S+?/,
  317. inputErrorMessage: "驳回原因不能为空",
  318. dangerouslyUseHTMLString: true,
  319. }
  320. )
  321. .then(async ({ value }) => {
  322. console.log(value, "value");
  323. try {
  324. this.$modal.loading("加载中...");
  325. // let {code,msg} = await
  326. // if(code=== 200){
  327. // }
  328. } catch (error) {
  329. } finally {
  330. this.$modal.closeLoading();
  331. }
  332. })
  333. .catch(() => {
  334. this.$modal.closeLoading();
  335. });
  336. },
  337. // 获取单据概述列表
  338. async getDetailList(row) {
  339. try {
  340. this.loading = true;
  341. let param = {
  342. billCode: row.billCode,
  343. type: row.type,
  344. ...this.sonQuery,
  345. };
  346. let { code, rows, total } = await getWorkDetailList(param);
  347. if (code === 200) {
  348. this.sonTableList = rows;
  349. this.sonTotal = total;
  350. }
  351. } catch (error) {
  352. } finally {
  353. this.loading = false;
  354. }
  355. },
  356. },
  357. };
  358. </script>
  359. <style lang="scss" scoped>
  360. #workSpace {
  361. padding: 12px;
  362. box-sizing: border-box;
  363. overflow-y: scroll;
  364. }
  365. .btn_grooup {
  366. margin-bottom: 10px;
  367. display: flex;
  368. justify-content: flex-end;
  369. }
  370. .el-pagination {
  371. margin-top: 10px;
  372. text-align: right;
  373. }
  374. </style>
  375. <style>
  376. .exporttable {
  377. border: solid 1px #c0c0c0;
  378. }
  379. .el-table .el-table__header-wrapper th {
  380. font-size: 14px;
  381. }
  382. </style>