IncidentTicketList.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  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 :xl="6" :lg="7" :md="8" :sm="24">
  8. <a-form-item label="事故单号">
  9. <j-input placeholder="请输入事故单号" v-model="queryParam.accidentNumber"></j-input>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :xl="6" :lg="7" :md="8" :sm="24">
  13. <a-form-item label="责任单位">
  14. <j-input placeholder="请输入责任单位" v-model="queryParam.responsibilityCompany"></j-input>
  15. </a-form-item>
  16. </a-col>
  17. <a-col :xl="6" :lg="7" :md="8" :sm="24">
  18. <a-form-item label="填报人">
  19. <j-dict-select-tag placeholder="请选择填报人" v-model="queryParam.informant" dictCode="sys_user ,realname,username"/>
  20. </a-form-item>
  21. </a-col>
  22. <template v-if="toggleSearchStatus">
  23. <a-col :xl="6" :lg="7" :md="8" :sm="24">
  24. <a-form-item label="计划单号">
  25. <!-- <j-dict-select-tag placeholder="请选择业务员" v-model="queryParam.businessPeople" dictCode="sys_user,realname,username"/> -->
  26. <j-input placeholder="请输入计划单号" v-model="queryParam.planNumber"></j-input>
  27. </a-form-item>
  28. </a-col>
  29. <a-col :xl="6" :lg="7" :md="8" :sm="24">
  30. <a-form-item label="质量事故单主题">
  31. <j-input placeholder="请输入质量事故单主题" v-model="queryParam.accidentTheme"></j-input>
  32. </a-form-item>
  33. </a-col>
  34. <a-col :xl="6" :lg="7" :md="8" :sm="24">
  35. <a-form-item label="财务备注">
  36. <j-input placeholder="请输入财务备注" v-model="queryParam.financeRemark"></j-input>
  37. </a-form-item>
  38. </a-col>
  39. </template>
  40. <a-col :xl="6" :lg="7" :md="8" :sm="24">
  41. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  42. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  43. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  44. <a @click="handleToggleSearch" style="margin-left: 8px">
  45. {{ toggleSearchStatus ? '收起' : '展开' }}
  46. <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
  47. </a>
  48. </span>
  49. </a-col>
  50. </a-row>
  51. </a-form>
  52. </div>
  53. <!-- 查询区域-END -->
  54. <!-- 操作按钮区域 -->
  55. <div class="table-operator">
  56. <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button> -->
  57. <a-button type="primary" icon="download" @click="handleExportXls('森_工厂质量事故单-主表')">导出</a-button>
  58. <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
  59. <a-button type="primary" icon="import">导入</a-button>
  60. </a-upload>
  61. <a-dropdown v-if="selectedRowKeys.length > 0">
  62. <a-menu slot="overlay">
  63. <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
  64. </a-menu>
  65. <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
  66. </a-dropdown> -->
  67. </div>
  68. <!-- table区域-begin -->
  69. <div>
  70. <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
  71. <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
  72. <a style="margin-left: 24px" @click="onClearSelected">清空</a>
  73. </div> -->
  74. <a-table
  75. ref="table"
  76. size="middle"
  77. bordered
  78. rowKey="id"
  79. :columns="columns"
  80. :dataSource="dataSource"
  81. :pagination="ipagination"
  82. :loading="loading"
  83. :scroll="{x: 2000}"
  84. :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  85. @change="handleTableChange">
  86. <template slot="htmlSlot" slot-scope="text">
  87. <div v-html="text"></div>
  88. </template>
  89. <template slot="imgSlot" slot-scope="text">
  90. <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
  91. <img v-else :src="getImgView(text)" height="25px" alt="图片不存在" style="max-width:80px;font-size: 12px;font-style: italic;"/>
  92. </template>
  93. <template slot="fileSlot" slot-scope="text">
  94. <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
  95. <a-button
  96. v-else
  97. :ghost="true"
  98. type="primary"
  99. icon="download"
  100. size="small"
  101. @click="uploadFile(text)">
  102. 下载
  103. </a-button>
  104. </template>
  105. <span slot="state" slot-scope="text, record">
  106. <span v-if="record.state =='5'">已完结</span>
  107. <span v-if="record.state =='4'">已推送</span>
  108. <span v-if="record.state =='3'">已反馈通知</span>
  109. <span v-if="record.state =='2'">已通知</span>
  110. <span v-if="record.state =='1'">未处理</span>
  111. </span>
  112. <span slot="action" slot-scope="text, record">
  113. <a @click="handleEdit(record,'edit')">编辑</a>
  114. <a-divider type="vertical" />
  115. <a @click="handleEdit(record,'detail')">详情</a>
  116. <!--
  117. <a-divider type="vertical" />
  118. <a-dropdown>
  119. <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
  120. <a-menu slot="overlay">
  121. <a-menu-item>
  122. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  123. <a>删除</a>
  124. </a-popconfirm>
  125. </a-menu-item>
  126. </a-menu>
  127. </a-dropdown> -->
  128. </span>
  129. </a-table>
  130. </div>
  131. <incidentTicket-modal ref="modalForm" @ok="modalFormOk" @close='loadData'></incidentTicket-modal>
  132. <incidentTicket-modal-detail ref="IncidentTicketModalDetail" @ok="modalFormOk" @close='loadData'></incidentTicket-modal-detail>
  133. </a-card>
  134. </template>
  135. <script>
  136. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  137. import IncidentTicketModal from './modules/IncidentTicketModal'
  138. import IncidentTicketModalDetail from './modules/IncidentTicketModalDetail'
  139. import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
  140. import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
  141. import {filterObj, cloneObject, pushIfNotExist } from '@/utils/util'
  142. import JEllipsis from '@/components/jeecg/JEllipsis'
  143. import JInput from '@/components/jeecg/JInput'
  144. export default {
  145. name: "IncidentTicketList",
  146. mixins:[JeecgListMixin],
  147. components: {
  148. JDictSelectTag,
  149. IncidentTicketModal,
  150. IncidentTicketModalDetail,
  151. JEllipsis,
  152. JInput
  153. },
  154. data () {
  155. let ellipsis = (v, l = 15) => <j-ellipsis value={v} length={l} /> // 省略
  156. return {
  157. description: '森_工厂质量事故单-主表管理页面',
  158. // 表头
  159. columns: [
  160. {
  161. title:'日期',
  162. align:"center",
  163. ellipsis: true,
  164. dataIndex: 'accidentData',
  165. width:100
  166. },
  167. {
  168. title:'质量事故单号',
  169. align:"center",
  170. customRender: (t) => ellipsis(t),
  171. dataIndex: 'accidentNumber',
  172. width:100
  173. },
  174. {
  175. title:'质量事故单主题',
  176. align:"center",
  177. customRender: (t) => ellipsis(t),
  178. dataIndex: 'accidentTheme',
  179. width:100,
  180. ellipsis: true,
  181. },
  182. {
  183. title:'责任单位',
  184. align:"center",
  185. customRender: (t) => ellipsis(t),
  186. dataIndex: 'responsibilityCompany',
  187. width:160,
  188. },
  189. {
  190. title:'责任人1',
  191. align:"center",
  192. dataIndex: 'responsibilityPerson1',
  193. width:80
  194. },
  195. {
  196. title:'责任人2',
  197. align:"center",
  198. dataIndex: 'responsibilityPerson2',
  199. width:80
  200. },
  201. {
  202. title:'责任人3',
  203. align:"center",
  204. dataIndex: 'responsibilityPerson3',
  205. width:80
  206. },
  207. {
  208. title:'计划单号',
  209. align:"center",
  210. dataIndex: 'jiHuaHao',
  211. width:100
  212. },
  213. {
  214. title:'款号',
  215. align:"center",
  216. dataIndex: 'styleNumber',
  217. width:100
  218. },
  219. {
  220. title:'总金额',
  221. align:"center",
  222. dataIndex: 'totalMoney',
  223. width:80
  224. },
  225. {
  226. title:'财务备注',
  227. align:"center",
  228. dataIndex: 'financeRemark',
  229. customRender: (t) => ellipsis(t),
  230. width:140
  231. },
  232. {
  233. title:'状态',
  234. align:"center",
  235. dataIndex: 'state',
  236. scopedSlots: { customRender: 'state' },
  237. width:80
  238. },
  239. {
  240. title: '操作',
  241. dataIndex: 'action',
  242. align:"center",
  243. scopedSlots: { customRender: 'action' },
  244. fixed:"right",
  245. width:120
  246. }
  247. ],
  248. url: {
  249. list: "/oa/incidentTicket/list",
  250. delete: "/oa/incidentTicket/delete",
  251. deleteBatch: "/oa/incidentTicket/deleteBatch",
  252. exportXlsUrl: "/oa/incidentTicket/exportXls",
  253. importExcelUrl: "oa/incidentTicket/importExcel",
  254. },
  255. dictOptions:{},
  256. dataSource:[]
  257. }
  258. },
  259. created(){
  260. this.dataSource.push({accidentTheme:''})
  261. },
  262. computed: {
  263. importExcelUrl: function(){
  264. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
  265. }
  266. },
  267. methods: {
  268. getQueryParams() {
  269. var param = Object.assign({}, this.queryParam, null);
  270. param.field = this.getQueryField();
  271. param.pageNo = this.ipagination.current;
  272. param.pageSize = this.ipagination.pageSize;
  273. return filterObj(param);
  274. },
  275. initDictConfig(){
  276. },
  277. handleEdit(record,data){
  278. if(data =='edit'){
  279. this.$refs.modalForm.visible = true
  280. this.$refs.modalForm.getHeaderList(record.id)
  281. // this.$refs.modalForm.defultMethods = 'edit'
  282. }else{
  283. this.$refs.IncidentTicketModalDetail.visible = true
  284. this.$refs.IncidentTicketModalDetail.getHeaderList(record.id)
  285. }
  286. }
  287. }
  288. }
  289. </script>
  290. <style scoped>
  291. @import '~@assets/less/common.less';
  292. </style>