index.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <template>
  2. <div class="requisition">
  3. <div class="applyList" v-if="isList">
  4. <el-row :gutter="10" class="mb10">
  5. <el-col :span="1.5">
  6. <span style="font-size: 14px;margin-right: 5px;">单据编码</span>
  7. <el-input
  8. v-model="queryParams.billCode"
  9. size="small"
  10. placeholder="请输入单据编码查询"
  11. clearable
  12. style="width: 240px"
  13. />
  14. </el-col>
  15. <el-col :span="1.5">
  16. <span style="font-size: 14px;margin-right: 5px;">物料名称</span>
  17. <el-input
  18. v-model="queryParams.name"
  19. size="small"
  20. placeholder="请输入物料名称查询"
  21. clearable
  22. style="width: 240px"
  23. />
  24. </el-col>
  25. <el-col :span="1.5">
  26. <span style="font-size: 14px;margin-right: 5px;">单据状态</span>
  27. <el-select
  28. v-model="queryParams.status"
  29. size="small"
  30. placeholder="请选择单据状态"
  31. clearable
  32. style="width: 240px">
  33. <el-option
  34. v-for="item in options"
  35. :key="item.value"
  36. :label="item.label"
  37. :value="item.value">
  38. </el-option>
  39. </el-select>
  40. </el-col>
  41. <el-col :span="1.5">
  42. <el-button type="primary" size="small" plain @click="getList(queryParams)">查询</el-button>
  43. </el-col>
  44. <!-- <el-col :span="1.5">
  45. <el-button type="primary" size="small" plain>高级查询</el-button>
  46. </el-col> -->
  47. <el-col :span="1.5">
  48. <el-button type="primary" size="small" plain @click="reset">重置</el-button>
  49. </el-col>
  50. </el-row>
  51. <el-row :gutter="10" class="mb10">
  52. <el-col :span="1.5">
  53. <el-button type="primary" size="small" plain @click="newAdd">新增</el-button>
  54. </el-col>
  55. <!-- <el-col :span="1.5">
  56. <el-button type="primary" size="small" plain>导入</el-button>
  57. </el-col>
  58. <el-col :span="1.5">
  59. <el-button type="primary" size="small" plain>导出</el-button>
  60. </el-col> -->
  61. <!-- <el-col :span="1.5">
  62. <el-button type="primary" size="small" plain>批量提交</el-button>
  63. </el-col>
  64. <el-col :span="1.5">
  65. <el-button type="primary" size="small" plain>批量删除</el-button>
  66. </el-col> -->
  67. </el-row>
  68. <el-card>
  69. <el-table
  70. :data="tableList"
  71. class="request-table"
  72. fit
  73. max-height="680"
  74. @selection-change="handleSelectionChange"
  75. >
  76. <!-- <el-table-column type="selection" width="55" /> -->
  77. <el-table-column label="序号" align="center" type="index" width="50"/>
  78. <el-table-column label="申请组织" align="center" width="200" prop="orgName" />
  79. <el-table-column label="单据编码" align="center" width="200" prop="billCode" />
  80. <el-table-column label="申请人" align="center" prop="createName" />
  81. <el-table-column label="申请时间" align="center" width="150" prop="createTime" />
  82. <el-table-column label="单据状态" align="center" prop="status" :formatter="statusJug" />
  83. <!-- <el-table-column label="物料编码" align="center" width="150" prop="materialCode" /> -->
  84. <el-table-column label="物料名称" align="center" width="150" prop="name" />
  85. <el-table-column label="创建人" align="center" prop="createName"/>
  86. <el-table-column label="创建时间" align="center" width="150" prop="createTime" />
  87. <el-table-column label="最后修改人" align="center" width="120" prop="updateName" />
  88. <el-table-column label="最后修改时间" align="center" width="150" prop="updateTime" />
  89. <el-table-column
  90. fixed="right"
  91. label="操作"
  92. align="center"
  93. width="150"
  94. >
  95. <template slot-scope="scope">
  96. <el-button type="text" size="small" @click="check(scope.row)">查看</el-button>
  97. <el-button @click="edit(scope.row)" v-if="scope.row.status == 0 || scope.row.status == 3" type="text" size="small">编辑</el-button>
  98. <el-button type="text" size="small" @click="deleteRow(scope.row)" v-if="scope.row.status == 0 || scope.row.status == 3">删除</el-button>
  99. </template>
  100. </el-table-column>
  101. </el-table>
  102. <el-pagination
  103. @size-change="handleSizeChange"
  104. @current-change="handleCurrentChange"
  105. :page-sizes="[5, 10, 15, 20]"
  106. :page-size=queryParams.pageSize
  107. layout="total, sizes, prev, pager, next, jumper"
  108. :total="total"
  109. style="text-align: center;">
  110. </el-pagination>
  111. </el-card>
  112. </div>
  113. <component :is="isComponent" v-model="isList" :pageStu="page" :disable="disable" :row="rowDetail" @refresh="getList" v-if="!isList"/>
  114. </div>
  115. </template>
  116. <script>
  117. import addReq from './add.vue';
  118. import { getReqList, delReq } from '@/api/requisition/basic'
  119. export default {
  120. name: 'requisition',
  121. components: {
  122. addReq
  123. },
  124. data() {
  125. return{
  126. //
  127. tableList: [],
  128. queryParams: {
  129. billCode: '',
  130. name: '',
  131. status: '',
  132. pageNum: 1,
  133. pageSize: 10
  134. },
  135. options: [{
  136. value: 0, label: '未提交'
  137. },{
  138. value: 1, label: '审批中'
  139. },{
  140. value: 2, label: '已完成'
  141. },{
  142. value: 3, label: '已驳回'
  143. },],
  144. total:0,
  145. // isComponent
  146. isComponent:'addReq',
  147. isList: true,
  148. // 页面状态
  149. page: '',
  150. rowDetail: {},
  151. disable: false
  152. }
  153. },
  154. created() {
  155. },
  156. mounted() {
  157. this.getList(this.queryParams)
  158. },
  159. methods: {
  160. reset() {
  161. this.queryParams.billCode = ''
  162. this.queryParams.name = ''
  163. this.queryParams.status = ''
  164. this.queryParams.pageNum = 1
  165. this.getList(this.queryParams)
  166. },
  167. newAdd() {
  168. this.isList = false
  169. this.isComponent = 'addReq'
  170. this.page = 'add'
  171. this.disable = false
  172. },
  173. getList(val) {
  174. console.log('val',val)
  175. getReqList(val).then(res => {
  176. if (res.code === 200) {
  177. this.tableList = res.rows
  178. this.total = res.total
  179. }
  180. })
  181. },
  182. // 表格内状态栏判断值
  183. statusJug(row) {
  184. if (row.status === 0) {
  185. return '未提交'
  186. } else if (row.status === 1) {
  187. return '审批中'
  188. } else if (row.status === 2) {
  189. return '已完成'
  190. } else if (row.status === 3) {
  191. return '已驳回'
  192. }
  193. },
  194. //
  195. handleSelectionChange () {
  196. },
  197. check(row) {
  198. console.log('查看详情', row)
  199. this.isList = false
  200. this.isComponent = 'addReq'
  201. this.page = 'check'
  202. this.rowDetail = row
  203. this.disable = true
  204. },
  205. edit(row) {
  206. console.log('修改先加载详情', row)
  207. this.isList = false
  208. this.isComponent = 'addReq'
  209. this.page = 'edit'
  210. this.rowDetail = row
  211. this.disable = false
  212. },
  213. deleteRow(row) {
  214. this.$confirm('是否删除此条数据?', '提示', {
  215. confirmButtonText: '确定',
  216. cancelButtonText: '取消',
  217. type: 'warning'
  218. }).then(() => {
  219. delReq(row.id).then(res => {
  220. if(res.code === 200) {
  221. this.$message({
  222. message: res.msg,
  223. type: 'success'
  224. });
  225. this.getList(this.queryParams)
  226. }
  227. })
  228. }).catch(() => {})
  229. },
  230. handleSizeChange(val) {
  231. console.log(`每页 ${val} 条`);
  232. this.queryParams.pageSize = val
  233. this.getList(this.queryParams)
  234. },
  235. handleCurrentChange(val) {
  236. console.log(`当前页: ${val}`);
  237. this.queryParams.pageNum = val
  238. this.getList(this.queryParams)
  239. }
  240. }
  241. }
  242. </script>
  243. <style scoped lang="scss">
  244. .requisition {
  245. height: calc(100vh - 84px);
  246. padding: 12px;
  247. box-sizing: border-box;
  248. }
  249. </style>