MaterialRegistration.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <template>
  2. <a-card :bordered="false" >
  3. <!-- 查询 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline" @keyup.enter.native="searchQuery">
  6. <a-row :gutter="24">
  7. <a-col :md="6" :sm="12">
  8. <a-form-item label="设备名称">
  9. <a-input placeholder="输入设备名称查询" v-model="queryParam.name"></a-input>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="12">
  13. <a-form-item label="购买日期">
  14. <a-date-picker
  15. style="width: 100%"
  16. placeholder="请选择购买日期"
  17. v-model="queryParam.buyTime"
  18. />
  19. </a-form-item>
  20. </a-col>
  21. <a-col :md="6" :sm="12">
  22. <a-form-item label="状态">
  23. <a-input placeholder="输入设备状态查询" v-model="queryParam.type"></a-input>
  24. </a-form-item>
  25. </a-col>
  26. <a-col :md="6" :sm="8">
  27. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  28. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  29. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  30. <a @click="handleToggleSearch" style="margin-left: 8px">
  31. {{ toggleSearchStatus ? '收起' : '展开' }}
  32. <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
  33. </a>
  34. </span>
  35. </a-col>
  36. </a-row>
  37. </a-form>
  38. </div>
  39. <!-- 操作按钮区域 -->
  40. <div class="table-operator" style="border-top: 5px">
  41. <a-button @click="handleAdd" type="primary" icon="plus">添加</a-button>
  42. <a-button @click="handleDelete" type="primary" icon="plus">删除</a-button>
  43. </div>
  44. <!-- table区域-begin -->
  45. <div>
  46. <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
  47. <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
  48. <a style="margin-left: 24px" @click="onClearSelected">清空</a>
  49. </div>
  50. <a-table
  51. ref="table"
  52. bordered
  53. size="middle"
  54. rowKey="id"
  55. :columns="columns"
  56. :dataSource="dataSource"
  57. :pagination="ipagination"
  58. :loading="loading"
  59. :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  60. @change="handleTableChange">
  61. <span slot="operation" slot-scope="text, record">
  62. <a @click="handleEdit(record)">编辑</a>
  63. <a-divider type="vertical" />
  64. <a @click="handleDetail(record)">详情</a>
  65. </span>
  66. </a-table>
  67. </div>
  68. <!-- 新增框 -->
  69. <add-material-registration ref='AddMaterialRegistration'></add-material-registration>
  70. <detail-material-registration ref="DetailMaterialRegistration"></detail-material-registration>
  71. </a-card>
  72. </template>
  73. <script>
  74. import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  75. import AddMaterialRegistration from './modules/AddMaterialRegistration'
  76. import DetailMaterialRegistration from './modules/DetailMaterialRegistration'
  77. export default {
  78. name: "MaterialRegistration",
  79. mixins: [JeecgListMixin],
  80. components: {
  81. AddMaterialRegistration,
  82. DetailMaterialRegistration
  83. },
  84. data() {
  85. return {
  86. queryParam:{ //查询条件
  87. },
  88. // 表头
  89. columns:[
  90. {
  91. title: '编号',
  92. align: "center",
  93. dataIndex: 'code',
  94. width: 120
  95. },
  96. {
  97. title: '设备名称',
  98. align: "center",
  99. dataIndex: 'name',
  100. width: 120
  101. },
  102. {
  103. title: '型号',
  104. align: "center",
  105. dataIndex: 'model',
  106. width: 120
  107. },
  108. {
  109. title: '购买日期',
  110. align: "center",
  111. dataIndex: 'buyTime',
  112. width: 120
  113. },
  114. {
  115. title: '购买数量',
  116. align: "center",
  117. dataIndex: 'buyNum',
  118. width: 120
  119. },
  120. {
  121. title: '单位',
  122. align: "center",
  123. dataIndex: 'unit',
  124. width: 120
  125. },
  126. {
  127. title: '购买金额',
  128. align: "center",
  129. dataIndex: 'amount',
  130. width: 120
  131. },
  132. {
  133. title: '使用者',
  134. align: "center",
  135. dataIndex: 'useId',
  136. width: 120
  137. },
  138. {
  139. title: '状态',
  140. align: "center",
  141. dataIndex: 'type',
  142. width: 120
  143. },
  144. {
  145. title: '供货方',
  146. align: "center",
  147. dataIndex: 'supply',
  148. width: 120
  149. },
  150. {
  151. title: '备注',
  152. align: "center",
  153. dataIndex: 'remarks',
  154. width: 120
  155. },
  156. {
  157. title: '来源',
  158. align: "center",
  159. dataIndex: 'source',
  160. width: 120
  161. },
  162. {
  163. title: '操作',
  164. align: "center",
  165. dataIndex: 'operation',
  166. scopedSlots: { customRender: 'operation' },
  167. width: 120
  168. },
  169. ]
  170. }
  171. },
  172. computed: {
  173. },
  174. created(){
  175. this.getData()
  176. },
  177. methods: {
  178. // 查询
  179. searchQuery(){
  180. },
  181. //重置
  182. searchReset(){
  183. this.queryParam ={}
  184. },
  185. // 获取数据
  186. getData(){
  187. },
  188. // 删除
  189. handleDelete(){
  190. },
  191. // 添加
  192. handleAdd(){
  193. this.$refs.AddMaterialRegistration.visible = true
  194. },
  195. //编辑
  196. handleEdit(record){
  197. this.$refs.AddMaterialRegistration.visible = true
  198. this.$refs.AddMaterialRegistration.defult = 'edit'
  199. this.$refs.AddMaterialRegistration.formState = record
  200. },
  201. //详情
  202. handleDetail(record){
  203. this.$refs.DetailMaterialRegistration.visible = true
  204. this.$refs.DetailMaterialRegistration.formState = record
  205. },
  206. }
  207. }
  208. </script>
  209. <style scoped>
  210. @import '~@assets/less/common.less'
  211. </style>