UpkeepItemList.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  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. <a-input placeholder="请输入保养项名称" v-model="queryParam.itemname"></a-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-tree-select
  15. ref="treeSelect"
  16. placeholder="请选择设备类型"
  17. v-model="queryParam.equipdefid"
  18. dict="tpm_equipment_tree,name,id"
  19. pidField="parentid"
  20. pidValue="0"
  21. hasChildField="has_child"
  22. >
  23. </j-tree-select>
  24. </a-form-item>
  25. </a-col>
  26. <a-col :xl="6" :lg="7" :md="8" :sm="24">
  27. <a-form-item label="保养项编号">
  28. <a-input placeholder="请输入保养项编号" v-model="queryParam.itemcode"></a-input>
  29. </a-form-item>
  30. </a-col>
  31. <!-- <template v-if="toggleSearchStatus">
  32. <a-col :xl="6" :lg="7" :md="8" :sm="24">
  33. <a-form-item label="保养项编号">
  34. <a-input placeholder="请输入保养项编号" v-model="queryParam.itemcode"></a-input>
  35. </a-form-item>
  36. </a-col>
  37. </template> -->
  38. <a-col :xl="6" :lg="7" :md="8" :sm="24">
  39. <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
  40. <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
  41. <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
  42. <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
  43. {{ toggleSearchStatus ? '收起' : '展开' }}
  44. <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
  45. </a> -->
  46. </span>
  47. </a-col>
  48. </a-row>
  49. </a-form>
  50. </div>
  51. <!-- 查询区域-END -->
  52. <!-- 操作按钮区域 -->
  53. <div class="table-operator">
  54. <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
  55. <!-- <a-button type="primary" icon="download" @click="handleExportXls('保养项')">导出</a-button>
  56. <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
  57. <a-button type="primary" icon="import">导入</a-button>
  58. </a-upload> -->
  59. <!-- 高级查询区域 -->
  60. <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query> -->
  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. :scroll="{x:true}"
  78. bordered
  79. rowKey="id"
  80. :columns="columns"
  81. :dataSource="dataSource"
  82. :pagination="ipagination"
  83. :loading="loading"
  84. :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  85. class="j-table-force-nowrap"
  86. @change="handleTableChange">
  87. <template slot="htmlSlot" slot-scope="text">
  88. <div v-html="text"></div>
  89. </template>
  90. <template slot="imgSlot" slot-scope="text,record">
  91. <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
  92. <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
  93. </template>
  94. <template slot="fileSlot" slot-scope="text">
  95. <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
  96. <a-button
  97. v-else
  98. :ghost="true"
  99. type="primary"
  100. icon="download"
  101. size="small"
  102. @click="downloadFile(text)">
  103. 下载
  104. </a-button>
  105. </template>
  106. <span slot="action" slot-scope="text, record">
  107. <a @click="handleEdit(record)">编辑</a>
  108. <a-divider type="vertical" />
  109. <a-dropdown>
  110. <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
  111. <a-menu slot="overlay">
  112. <a-menu-item>
  113. <a @click="handleDetail(record)">详情</a>
  114. </a-menu-item>
  115. <a-menu-item>
  116. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  117. <a>删除</a>
  118. </a-popconfirm>
  119. </a-menu-item>
  120. </a-menu>
  121. </a-dropdown>
  122. </span>
  123. </a-table>
  124. </div>
  125. <upkeep-item-modal ref="modalForm" @ok="modalFormOk"></upkeep-item-modal>
  126. </a-card>
  127. </template>
  128. <script>
  129. import '@/assets/less/TableExpand.less'
  130. import { mixinDevice } from '@/utils/mixin'
  131. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  132. import UpkeepItemModal from './modules/UpkeepItemModal'
  133. export default {
  134. name: 'UpkeepItemList',
  135. mixins:[JeecgListMixin, mixinDevice],
  136. components: {
  137. UpkeepItemModal
  138. },
  139. data () {
  140. return {
  141. description: '保养项管理页面',
  142. // 表头
  143. columns: [
  144. {
  145. title: '#',
  146. dataIndex: '',
  147. key:'rowIndex',
  148. width:60,
  149. align:"center",
  150. customRender:function (t,r,index) {
  151. return parseInt(index)+1;
  152. }
  153. },
  154. {
  155. title:'保养项名称',
  156. align:"center",
  157. dataIndex: 'itemname'
  158. },
  159. {
  160. title:'设备类型',
  161. align:"center",
  162. dataIndex: 'equiptypeName'
  163. },
  164. {
  165. title:'保养编号',
  166. align:"center",
  167. dataIndex: 'itemcode'
  168. },
  169. {
  170. title:'保养标准',
  171. align:"center",
  172. dataIndex: 'itemcontent'
  173. },
  174. {
  175. title:'备注',
  176. align:"center",
  177. dataIndex: 'remark'
  178. },
  179. {
  180. title: '操作',
  181. dataIndex: 'action',
  182. align:"center",
  183. fixed:"right",
  184. width:147,
  185. scopedSlots: { customRender: 'action' }
  186. }
  187. ],
  188. url: {
  189. list: "/cmmsUpkeepItem/cmmsUpkeepItem/list",
  190. delete: "/cmmsUpkeepItem/cmmsUpkeepItem/delete",
  191. deleteBatch: "/cmmsUpkeepItem/cmmsUpkeepItem/deleteBatch",
  192. exportXlsUrl: "/cmmsUpkeepItem/cmmsUpkeepItem/exportXls",
  193. importExcelUrl: "cmmsUpkeepItem/cmmsUpkeepItem/importExcel",
  194. },
  195. dictOptions:{},
  196. superFieldList:[],
  197. }
  198. },
  199. created() {
  200. this.getSuperFieldList();
  201. },
  202. computed: {
  203. importExcelUrl: function(){
  204. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
  205. },
  206. },
  207. methods: {
  208. initDictConfig(){
  209. },
  210. getSuperFieldList(){
  211. let fieldList=[];
  212. fieldList.push({type:'string',value:'itemcode',text:'保养编号',dictCode:''})
  213. fieldList.push({type:'string',value:'itemname',text:'名称',dictCode:''})
  214. fieldList.push({type:'string',value:'equipdefid',text:'设备类型ID(设备树,可单选可多选,多选设备类型用逗号连接)',dictCode:''})
  215. fieldList.push({type:'string',value:'itemcontent',text:'保养标准',dictCode:''})
  216. fieldList.push({type:'string',value:'remark',text:'备注',dictCode:''})
  217. this.superFieldList = fieldList
  218. }
  219. }
  220. }
  221. </script>
  222. <style scoped>
  223. @import '~@assets/less/common.less';
  224. </style>