ProdPlanList.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. <template>
  2. <a-card :bordered="false">
  3. <div ref="pie" :style="{
  4. width: '600px',
  5. height: '400px',
  6. position: 'absolute',
  7. left: '-9999px',
  8. top: '-9999px',
  9. visibility: 'hidden'
  10. }" />
  11. <div ref="barline" :style="{
  12. width: '600px',
  13. height: '400px',
  14. position: 'absolute',
  15. left: '-9999px',
  16. top: '-9999px',
  17. visibility: 'hidden'
  18. }" />
  19. <!-- 查询区域 -->
  20. <div class="table-page-search-wrapper">
  21. <a-form layout="inline" @keyup.enter.native="searchQuery">
  22. <a-row :gutter="24">
  23. </a-row>
  24. </a-form>
  25. </div>
  26. <!-- 查询区域-END -->
  27. <!-- 操作按钮区域 -->
  28. <div class="table-operator">
  29. <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
  30. <!-- <a-button type="primary" icon="download" @click="handleExportXls('生产计划')">导出</a-button> -->
  31. <!-- <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel" :customRequest="customRequest">
  32. <a-button type="primary" icon="import">导入</a-button>
  33. </a-upload> -->
  34. <!-- 高级查询区域 -->
  35. <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
  36. <a-dropdown v-if="selectedRowKeys.length > 0">
  37. <a-menu slot="overlay">
  38. <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
  39. </a-menu>
  40. <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
  41. </a-dropdown> -->
  42. </div>
  43. <!-- table区域-begin -->
  44. <div>
  45. <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
  46. <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
  47. <a style="margin-left: 24px" @click="onClearSelected">清空</a>
  48. </div>
  49. <a-table
  50. ref="table"
  51. size="middle"
  52. :scroll="{x:true}"
  53. bordered
  54. rowKey="id"
  55. :columns="columns"
  56. :dataSource="dataSource"
  57. :pagination="ipagination"
  58. :loading="loading"
  59. :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  60. class="j-table-force-nowrap"
  61. @change="handleTableChange">
  62. <template slot="htmlSlot" slot-scope="text">
  63. <div v-html="text"></div>
  64. </template>
  65. <template slot="imgSlot" slot-scope="text,record">
  66. <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
  67. <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
  68. </template>
  69. <template slot="fileSlot" slot-scope="text">
  70. <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
  71. <a-button
  72. v-else
  73. :ghost="true"
  74. type="primary"
  75. icon="download"
  76. size="small"
  77. @click="downloadFile(text)">
  78. 下载
  79. <span v-if="text" style="color: #13CE66;">({{text ? "已解析" : "未解析"}})</span>
  80. <span v-else style="color: #E6A23C;">({{text ? "已解析" : "未解析"}})</span>
  81. </a-button>
  82. </template>
  83. <span slot="action" slot-scope="text, record" >
  84. <a @click="handleEdit(record)">编辑</a>
  85. <a-divider type="vertical" />
  86. <a @click="handleDetail(record)">详情</a>
  87. <a-divider type="vertical" />
  88. <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
  89. <a>删除</a>
  90. </a-popconfirm>
  91. <a-divider type="vertical" />
  92. <a @click="handleAnalysis(record.id)" >解析</a>
  93. <a-divider type="vertical" />
  94. <a @click="handleReport(record.id)">生成报告</a>
  95. <a-divider type="vertical" />
  96. <a @click="handleEmal(record.id)">
  97. <span v-if="record.sendState === 1">重新发送</span>
  98. <span v-else>发送邮件</span>
  99. </a>
  100. </span>
  101. </a-table>
  102. </div>
  103. <prod-plan-modal ref="modalForm" @ok="modalFormOk"></prod-plan-modal>
  104. </a-card>
  105. </template>
  106. <script>
  107. import '@/assets/less/TableExpand.less'
  108. import { mixinDevice } from '@/utils/mixin'
  109. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  110. import ProdPlanModal from './modules/ProdPlanModal'
  111. import { getAction,downFile,postAction} from '@/api/manage'
  112. export default {
  113. name: 'ProdPlanList',
  114. mixins:[JeecgListMixin, mixinDevice],
  115. components: {
  116. ProdPlanModal
  117. },
  118. data () {
  119. return {
  120. description: '生产计划管理页面',
  121. // 表头
  122. columns: [
  123. {
  124. title: '#',
  125. dataIndex: '',
  126. key:'rowIndex',
  127. width:60,
  128. align:"center",
  129. customRender:function (t,r,index) {
  130. return parseInt(index)+1;
  131. }
  132. },
  133. {
  134. title:'计划日期',
  135. align:"center",
  136. dataIndex: 'planDate',
  137. customRender:function (text) {
  138. return !text?"":(text.length>10?text.substr(0,10):text)
  139. }
  140. },
  141. {
  142. title:'计划表',
  143. align:"center",
  144. dataIndex: 'planSheet',
  145. scopedSlots: {customRender: 'fileSlot'}
  146. },
  147. {
  148. title:'发件状态',
  149. align:"center",
  150. dataIndex: 'sendState',
  151. customRender:function (text) {
  152. return text === 1 ? "已发送" : "未发送"
  153. }
  154. },
  155. {
  156. title: '操作',
  157. dataIndex: 'action',
  158. align:"center",
  159. fixed:"right",
  160. width:147,
  161. scopedSlots: { customRender: 'action' }
  162. }
  163. ],
  164. url: {
  165. list: "/ProdPlan/prodPlan/list",
  166. delete: "/ProdPlan/prodPlan/delete",
  167. analysis: "/ProdPlan/prodPlan/analysis",
  168. report: "/ProdPlan/prodPlan/report",
  169. email: "/ProdPlan/prodPlan/email",
  170. deleteBatch: "/ProdPlan/prodPlan/deleteBatch",
  171. exportXlsUrl: "/ProdPlan/prodPlan/exportXls",
  172. importExcelUrl: "ProdPlan/prodPlan/importExcel",
  173. },
  174. dictOptions:{},
  175. superFieldList:[],
  176. }
  177. },
  178. created() {
  179. this.getSuperFieldList();
  180. },
  181. computed: {
  182. importExcelUrl: function(){
  183. return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
  184. },
  185. },
  186. mounted() {
  187. this.initPie();
  188. },
  189. methods: {
  190. customRequest(options){
  191. let params = new FormData();
  192. params.append("file", options.file)
  193. params.append("plan")
  194. httpAction(this.url.importExcelUrl,params,'POST').then(res=>{
  195. if(res.success){
  196. this.$message.success(res.message)
  197. this.searchQuery()
  198. }else{
  199. this.$message.warning(res.message);
  200. }
  201. })
  202. },
  203. initDictConfig(){
  204. },
  205. getSuperFieldList(){
  206. let fieldList=[];
  207. fieldList.push({type:'date',value:'planDate',text:'计划日期'})
  208. fieldList.push({type:'string',value:'planSheet',text:'计划表',dictCode:''})
  209. fieldList.push({type:'int',value:'sendState',text:'发件状态',dictCode:''})
  210. this.superFieldList = fieldList
  211. },
  212. handleAnalysis: function (id) {
  213. var that = this;
  214. getAction(that.url.analysis, {id: id}).then((res) => {
  215. if (res.success) {
  216. that.$message.success(res.message);
  217. } else {
  218. that.$message.warning(res.message);
  219. }
  220. });
  221. },
  222. handleReport(id){
  223. let fileName = "导出文件"
  224. let pie = this.pieChart.getDataURL({
  225. type: 'png',
  226. pixelRatio: 2, // 设置像素比,提高清晰度
  227. backgroundColor: '#fff' // 设置背景色
  228. }).replace(/^data:image\/\w+;base64,/, '')
  229. downFile(this.url.report,{id: id,pie:pie},"POST").then((data)=>{
  230. if (!data) {
  231. this.$message.warning("文件下载失败")
  232. return
  233. }
  234. if (typeof window.navigator.msSaveBlob !== 'undefined') {
  235. window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}), fileName+'.xlsx')
  236. // window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
  237. }else{
  238. let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}))
  239. // let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
  240. let link = document.createElement('a')
  241. link.style.display = 'none'
  242. link.href = url
  243. link.setAttribute('download', fileName+'.xlsx')
  244. document.body.appendChild(link)
  245. link.click()
  246. document.body.removeChild(link); //下载完成移除元素
  247. window.URL.revokeObjectURL(url); //释放掉blob对象
  248. }
  249. })
  250. },
  251. handleEmal: function (id) {
  252. var that = this;
  253. let pie = that.pieChart.getDataURL({
  254. type: 'png',
  255. pixelRatio: 2, // 设置像素比,提高清晰度
  256. backgroundColor: '#fff' // 设置背景色
  257. }).replace(/^data:image\/\w+;base64,/, '')
  258. postAction(that.url.email, {id: id,pie:pie}).then((res) => {
  259. this.searchQuery();
  260. if (res.success) {
  261. that.$message.success(res.message);
  262. } else {
  263. that.$message.warning(res.message);
  264. }
  265. });
  266. },
  267. initPie(){
  268. this.pieChart = this.$echarts.init(this.$refs.pie)
  269. let option = {
  270. color: ['#70bfe5', '#eb6a6c', '#f9c942', '#91c974', '#5a6ac0'],
  271. tooltip: {
  272. trigger: 'item',
  273. formatter: '{a} <br/>{b}: {c} ({d}%)'
  274. },
  275. backgroundColor: '#fff',
  276. legend: {
  277. data: [
  278. '开发未完',
  279. '日别Capa不足',
  280. '合并生产',
  281. 'LOT不良'
  282. ]
  283. },
  284. series: [
  285. {
  286. name: 'Access From',
  287. type: 'pie',
  288. selectedMode: 'single',
  289. radius: [0, '30%'],
  290. label: {
  291. position: 'inner',
  292. fontSize: 14
  293. },
  294. labelLine: {
  295. show: false
  296. },
  297. data: [
  298. { value: 280, name: 'R&D',itemStyle: {color:'#fc8251'} },
  299. { value: 494, name: '制造',itemStyle: {color:'#033E6B'}, selected: true }
  300. ]
  301. },
  302. {
  303. name: 'Access From',
  304. type: 'pie',
  305. radius: ['45%', '60%'],
  306. labelLine: {
  307. length: 30
  308. },
  309. label: {
  310. formatter: '{a|{b}}{abg|}\n{hr|}\n {b|数量:}{c} {per|{d}%} ',
  311. backgroundColor: '#F6F8FC',
  312. borderColor: '#8C8D8E',
  313. borderWidth: 1,
  314. borderRadius: 4,
  315. rich: {
  316. a: {
  317. color: '#6E7079',
  318. lineHeight: 22,
  319. align: 'center'
  320. },
  321. hr: {
  322. borderColor: '#8C8D8E',
  323. width: '100%',
  324. borderWidth: 1,
  325. height: 0
  326. },
  327. b: {
  328. color: '#4C5058',
  329. fontSize: 14,
  330. fontWeight: 'bold',
  331. lineHeight: 33
  332. },
  333. per: {
  334. color: '#fff',
  335. backgroundColor: '#4C5058',
  336. padding: [3, 4],
  337. borderRadius: 4
  338. }
  339. }
  340. },
  341. data: [
  342. { value: 280, name: '开发未完' ,itemStyle: {color:'#fc8251'}},
  343. { value: 376, name: '日别Capa不足',itemStyle: {color:'#25567B'} },
  344. { value: 40, name: '合并生产',itemStyle: {color:'#0B61A4'} },
  345. { value: 78, name: 'LOT不良',itemStyle: {color:'#66A3D2'} },
  346. ]
  347. }
  348. ]
  349. };
  350. this.pieChart.setOption(option)
  351. }
  352. }
  353. }
  354. </script>
  355. <style scoped>
  356. @import '~@assets/less/common.less';
  357. </style>