MonthGoalMerge.vue 40 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="编码" prop="code">
  5. <el-input v-model="queryParams.code" placeholder="请输入编码" clearable @keyup.enter.native="handleQuery"/>
  6. </el-form-item>
  7. <el-form-item label="目标名称" prop="goalName">
  8. <el-input v-model="queryParams.goalName" placeholder="请输入目标名称" clearable @keyup.enter.native="handleQuery"/>
  9. </el-form-item>
  10. <el-form-item label="单据日期" prop="documentDate">
  11. <el-date-picker
  12. v-model="queryParams.documentDateRange"
  13. type="daterange"
  14. align="right"
  15. unlink-panels
  16. range-separator="至"
  17. start-placeholder="开始日期"
  18. end-placeholder="结束日期"
  19. value-format="yyyy-MM-dd"
  20. @keyup.enter.native="handleQuery"
  21. :picker-options="pickerOptions">
  22. </el-date-picker>
  23. </el-form-item>
  24. <el-form-item label="年度" prop="annual">
  25. <el-date-picker
  26. v-model="queryParams.annual"
  27. type="year"
  28. clearable
  29. value-format="yyyy"
  30. @keyup.enter.native="handleQuery"
  31. placeholder="请输入年度">
  32. </el-date-picker>
  33. </el-form-item>
  34. <el-form-item label="月份" prop="monthly">
  35. <el-date-picker
  36. v-model="queryParams.monthly"
  37. type="month"
  38. clearable
  39. value-format="M"
  40. @keyup.enter.native="handleQuery"
  41. placeholder="请输入月份">
  42. </el-date-picker>
  43. </el-form-item>
  44. <el-form-item label="制单人" prop="creator">
  45. <el-popover-select-v2 v-model="queryParams.creator" title="制单人" valueKey="name"
  46. referName="CONTACTS_PARAM"
  47. :dataMapping="{ creatorCode: 'code', creator: 'name'}"
  48. :source.sync="queryParams" placeholder="请输入制单人">
  49. </el-popover-select-v2>
  50. </el-form-item>
  51. <el-form-item label="部门" prop="dept">
  52. <el-popover-select-v2 v-model="queryParams.dept" title="部门" valueKey="name"
  53. referName="DEPT_PARAM"
  54. :dataMapping="{ deptCode: 'code', dept: 'name'}"
  55. :source.sync="queryParams" placeholder="请输入部门">
  56. </el-popover-select-v2>
  57. </el-form-item>
  58. <el-form-item label="目标类型" prop="goalCategory">
  59. <el-select v-model="queryParams.goalCategory" placeholder="请输入目标类型" @change="changeGoalCategoryQuery" @keyup.enter.native="handleQuery">
  60. <el-option
  61. v-for="item in goalCategoryList"
  62. :key="item.value"
  63. :label="item.label"
  64. :value="item.value">
  65. </el-option>
  66. </el-select>
  67. </el-form-item>
  68. <el-form-item v-if="queryParams.goalCategory === '客户维度'" label="客户" prop="custom">
  69. <el-popover-select-v2 v-model="queryParams.custom" title="客户" valueKey="name"
  70. referName="CUSTOMER_PARAM"
  71. :dataMapping="{ customCode: 'code', custom: 'name'}"
  72. :source.sync="queryParams" placeholder="请输入客户">
  73. </el-popover-select-v2>
  74. </el-form-item>
  75. <el-form-item v-if="queryParams.goalCategory === '销售区域'" label="销售区域" prop="saleZone">
  76. <el-popover-select-v2 v-model="queryParams.saleZoneCode" title="销售区域" valueKey="name"
  77. referName="DEPT_PARAM"
  78. :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
  79. :source.sync="queryParams" placeholder="请输入销售区域">
  80. </el-popover-select-v2>
  81. </el-form-item>
  82. <el-form-item v-if="queryParams.goalCategory === '一级分类'" label="一级分类" prop="oneLevelClassify">
  83. <el-select v-model="queryParams.oneLevelClassify" size="mini" clearable
  84. @focus="chooseTreeReferForQuery('MATERIALCLASSIFY_PARAM', false, '一级物料分类')"
  85. style="width: 200px">
  86. <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
  87. </el-select>
  88. </el-form-item>
  89. <el-form-item v-if="queryParams.goalCategory === '二级分类'" label="二级分类" prop="custom">
  90. <el-select v-model="queryParams.twoLevelClassify" size="mini" clearable
  91. @focus="chooseTreeReferForQuery('MATERIALCLASSIFY_PARAM', false, '二级物料分类')"
  92. style="width: 200px">
  93. <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
  94. </el-select>
  95. </el-form-item>
  96. <el-form-item>
  97. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  98. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  99. </el-form-item>
  100. </el-form>
  101. <el-row :gutter="10" class="mb8">
  102. <el-col :span="1.5">
  103. <el-button
  104. type="primary"
  105. plain
  106. icon="el-icon-plus"
  107. size="mini"
  108. @click="handleAdd"
  109. v-hasPermi="['goal_management:monthGoalMerge:add']"
  110. >新增
  111. </el-button>
  112. </el-col>
  113. <el-col :span="1.5">
  114. <el-button
  115. type="danger"
  116. plain
  117. icon="el-icon-delete"
  118. size="mini"
  119. :disabled="multiple"
  120. @click="handleDelete"
  121. v-hasPermi="['goal_management:monthGoalMerge:remove']"
  122. >删除
  123. </el-button>
  124. </el-col>
  125. <el-col :span="1.5">
  126. <el-button
  127. type="warning"
  128. plain
  129. icon="el-icon-download"
  130. size="mini"
  131. @click="handleExport"
  132. v-hasPermi="['goal_management:monthGoalMerge:export']"
  133. >导出
  134. </el-button>
  135. </el-col>
  136. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  137. </el-row>
  138. <el-table v-loading="loading" :data="monthGoalMergeList" @selection-change="handleSelectionChange">
  139. <el-table-column type="selection" width="55" align="center"/>
  140. <el-table-column label="id唯一标识" align="center" prop="id"/>
  141. <el-table-column label="编码" align="center" prop="code"/>
  142. <el-table-column label="目标名称" align="center" prop="goalName"/>
  143. <el-table-column label="单据日期" align="center" prop="documentDate" width="180">
  144. <template slot-scope="scope">
  145. <span>{{ parseTime(scope.row.documentDate, '{y}-{m}-{d}') }}</span>
  146. </template>
  147. </el-table-column>
  148. <el-table-column label="年度" align="center" prop="annual"/>
  149. <el-table-column label="月份" align="center" prop="monthly"/>
  150. <el-table-column label="客户编码" align="center" prop="customCode"/>
  151. <el-table-column label="客户" align="center" prop="custom"/>
  152. <el-table-column label="制单人编码" align="center" prop="creatorCode"/>
  153. <el-table-column label="制单人" align="center" prop="creator"/>
  154. <el-table-column label="部门编码" align="center" prop="deptCode"/>
  155. <el-table-column label="部门" align="center" prop="dept"/>
  156. <el-table-column label="目标类型" align="center" prop="goalCategory"/>
  157. <el-table-column label="目标值合计" align="center" prop="goalSum"/>
  158. <el-table-column label="单据状态" align="center" prop="documentStatus"/>
  159. <el-table-column label="删除状态" align="center" prop="deleteStatus"/>
  160. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  161. <template slot-scope="scope">
  162. <el-button
  163. size="mini"
  164. type="text"
  165. icon="el-icon-edit"
  166. @click="handleUpdate(scope.row)"
  167. v-hasPermi="['goal_management:monthGoalMerge:edit']"
  168. >修改
  169. </el-button>
  170. <el-button
  171. size="mini"
  172. type="text"
  173. icon="el-icon-delete"
  174. @click="handleDelete(scope.row)"
  175. v-hasPermi="['goal_management:monthGoalMerge:remove']"
  176. >删除
  177. </el-button>
  178. </template>
  179. </el-table-column>
  180. </el-table>
  181. <pagination
  182. v-show="total>0"
  183. :total="total"
  184. :page.sync="queryParams.pageNum"
  185. :limit.sync="queryParams.pageSize"
  186. @pagination="getList"
  187. />
  188. <!-- 添加或修改月销售目标合并抽屉 -->
  189. <el-drawer :title="title" :visible.sync="open" direction="rtl" :before-close="handleClose" size="100%">
  190. <el-form ref="form" :model="form" :rules="rules" label-width="120px">
  191. <el-row :gutter="20">
  192. <el-col :span="6">
  193. <el-form-item label="编码" prop="code">
  194. <el-input v-model="form.code" placeholder="编码后端自动生成" disabled/>
  195. </el-form-item>
  196. </el-col>
  197. <el-col :span="6">
  198. <el-form-item label="目标名称" prop="goalName">
  199. <el-input v-model="form.goalName" placeholder="目标名称后端自动生成" disabled/>
  200. </el-form-item>
  201. </el-col>
  202. <el-col :span="6">
  203. <el-form-item label="单据日期" prop="documentDate">
  204. <el-date-picker clearable
  205. v-model="form.documentDate"
  206. type="date"
  207. value-format="yyyy-MM-dd"
  208. placeholder="请选择单据日期">
  209. </el-date-picker>
  210. </el-form-item>
  211. </el-col>
  212. <el-col :span="6">
  213. <el-form-item label="年度" prop="annual">
  214. <el-date-picker clearable
  215. v-model="form.annual"
  216. type="year"
  217. value-format="yyyy"
  218. placeholder="请输入年度">
  219. </el-date-picker>
  220. </el-form-item>
  221. </el-col>
  222. </el-row>
  223. <el-row :gutter="20">
  224. <el-col :span="6">
  225. <el-form-item label="月份" prop="monthly">
  226. <el-date-picker clearable
  227. v-model="form.monthly"
  228. type="month"
  229. value-format="M"
  230. placeholder="请输入月份">
  231. </el-date-picker>
  232. </el-form-item>
  233. </el-col>
  234. <el-col :span="6">
  235. <el-form-item label="制单人" prop="creator">
  236. <el-popover-select-v2 v-model="form.creator" title="制单人" valueKey="name"
  237. referName="CONTACTS_PARAM"
  238. :dataMapping="{ creatorCode: 'code', creator: 'name'}"
  239. :source.sync="form" placeholder="请输入制单人">
  240. </el-popover-select-v2>
  241. </el-form-item>
  242. </el-col>
  243. <el-col :span="6">
  244. <el-form-item label="部门" prop="dept">
  245. <el-popover-select-v2 v-model="form.dept" title="部门" valueKey="name"
  246. referName="DEPT_PARAM"
  247. :dataMapping="{ deptCode: 'code', dept: 'name'}"
  248. :source.sync="form" placeholder="请输入部门">
  249. </el-popover-select-v2>
  250. </el-form-item>
  251. </el-col>
  252. <el-col :span="6">
  253. <el-form-item label="目标类型" prop="goalCategory">
  254. <el-select v-model="form.goalCategory" placeholder="请输入目标类型" @change="changeGoalCategoryForm" @keyup.enter.native="handleQuery">
  255. <el-option
  256. v-for="item in goalCategoryList"
  257. :key="item.value"
  258. :label="item.label"
  259. :value="item.value">
  260. </el-option>
  261. </el-select>
  262. </el-form-item>
  263. </el-col>
  264. </el-row>
  265. <el-row :gutter="20">
  266. <el-col :span="6">
  267. <el-form-item label="目标值合计" prop="goalSum">
  268. <el-input v-model="form.goalSum" placeholder="目标值合计自动计算" disabled/>
  269. </el-form-item>
  270. </el-col>
  271. <el-col :span="6">
  272. <el-form-item v-if="form.goalCategory === '客户维度'" label="客户" prop="custom">
  273. <el-popover-select-v2 v-model="form.custom" title="客户" valueKey="name"
  274. referName="CUSTOMER_PARAM"
  275. :dataMapping="{ customCode: 'code', custom: 'name'}"
  276. :source.sync="form" placeholder="请输入客户">
  277. </el-popover-select-v2>
  278. </el-form-item>
  279. <el-form-item v-if="form.goalCategory === '销售区域'" label="销售区域" prop="saleZone">
  280. <el-popover-select-v2 v-model="form.saleZoneCode" title="销售区域" valueKey="name"
  281. referName="DEPT_PARAM"
  282. :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
  283. :source.sync="form" placeholder="请输入销售区域">
  284. </el-popover-select-v2>
  285. </el-form-item>
  286. <el-form-item v-if="form.goalCategory === '一级分类'" label="一级分类" prop="oneLevelClassify">
  287. <el-select v-model="form.oneLevelClassify" size="mini" clearable
  288. @focus="chooseTreeReferForMain('MATERIALCLASSIFY_PARAM', false, '一级物料分类')"
  289. style="width: 200px">
  290. <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
  291. </el-select>
  292. </el-form-item>
  293. <el-form-item v-if="form.goalCategory === '二级分类'" label="二级分类" prop="custom">
  294. <el-select v-model="form.twoLevelClassify" size="mini" clearable
  295. @focus="chooseTreeReferForMain('MATERIALCLASSIFY_PARAM', false, '二级物料分类')"
  296. style="width: 200px">
  297. <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
  298. </el-select>
  299. </el-form-item>
  300. </el-col>
  301. <el-col :span="6">
  302. <el-form-item label="操作">
  303. <el-button type="primary" @click="submitForm">确 定</el-button>
  304. <el-button @click="cancel">取 消</el-button>
  305. </el-form-item>
  306. </el-col>
  307. </el-row>
  308. </el-form>
  309. <el-row :gutter="10" class="mb8">
  310. <el-col :span="1.5">
  311. <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddDetails">增行</el-button>
  312. </el-col>
  313. <el-col :span="1.5">
  314. <el-button type="primary" plain icon="el-icon-folder-opened" size="mini" @click="clickMerge">合 并</el-button>
  315. </el-col>
  316. </el-row>
  317. <!-- v-loading="loading"-->
  318. <el-table :data="monthGoalMergeDetailsList" @selection-change="handleSelectionChange">
  319. <el-table-column type="selection" width="55" align="center" fixed />
  320. <el-table-column label="销售组织" align="center" prop="saleOrg" width="180">
  321. <template slot-scope="scope">
  322. <el-popover-select-v2 v-model="monthGoalMergeDetailsList[scope.$index].saleOrg" title="销售组织" valueKey="name"
  323. referName="CUSTOMER_PARAM"
  324. :dataMapping="{ saleOrgCode: 'code', saleOrg: 'name'}"
  325. :source.sync="monthGoalMergeDetailsList[scope.$index]" placeholder="请输入销售组织">
  326. </el-popover-select-v2>
  327. </template>
  328. </el-table-column>
  329. <el-table-column label="销售区域" align="center" prop="saleZone" width="180">
  330. <template slot-scope="scope">
  331. <el-popover-select-v2 v-model="monthGoalMergeDetailsList[scope.$index].saleZone" title="销售区域" valueKey="name"
  332. referName="CUSTOMER_PARAM"
  333. :dataMapping="{ saleZoneCode: 'code', saleZone: 'name'}"
  334. :source.sync="monthGoalMergeDetailsList[scope.$index]" placeholder="请输入销售区域">
  335. </el-popover-select-v2>
  336. </template>
  337. </el-table-column>
  338. <el-table-column label="客户" align="center" prop="custom" width="180">
  339. <template slot-scope="scope">
  340. <el-popover-select-v2 v-model="monthGoalMergeDetailsList[scope.$index].custom" title="客户" valueKey="name"
  341. referName="CUSTOMER_PARAM"
  342. :dataMapping="{ customCode: 'code', custom: 'name'}"
  343. :source.sync="monthGoalMergeDetailsList[scope.$index]" placeholder="请输入客户">
  344. </el-popover-select-v2>
  345. </template>
  346. </el-table-column>
  347. <el-table-column label="部门" align="center" prop="dept" width="180">
  348. <template slot-scope="scope">
  349. <el-popover-select-v2 v-model="monthGoalMergeDetailsList[scope.$index].dept" title="部门" valueKey="name"
  350. referName="DEPT_PARAM"
  351. :dataMapping="{ deptCode: 'code', dept: 'name'}"
  352. :source.sync="monthGoalMergeDetailsList[scope.$index]" placeholder="请输入客户">
  353. </el-popover-select-v2>
  354. </template>
  355. </el-table-column>
  356. <el-table-column label="制单人" align="center" prop="creator" width="180">
  357. <template slot-scope="scope">
  358. <el-popover-select-v2 v-model="monthGoalMergeDetailsList[scope.$index].creator" title="负责人" valueKey="name"
  359. referName="CONTACTS_PARAM"
  360. :dataMapping="{ creatorCode: 'code', creator: 'name'}"
  361. :source.sync="monthGoalMergeDetailsList[scope.$index]" placeholder="请输入负责人">
  362. </el-popover-select-v2>
  363. </template>
  364. </el-table-column>
  365. <el-table-column label="科室" align="center" prop="department" width="180">
  366. <template slot-scope="scope">
  367. <el-input v-model="monthGoalMergeDetailsList[scope.$index].department" placeholder="请输入科室"></el-input>
  368. </template>
  369. </el-table-column>
  370. <el-table-column label="一级分类" align="center" prop="oneLevelClassify" width="180">
  371. <template slot-scope="scope">
  372. <el-select v-model="monthGoalMergeDetailsList[scope.$index].oneLevelClassify" size="mini" clearable
  373. @focus="chooseTreeReferForDetails('MATERIALCLASSIFY_PARAM', false, '一级物料分类', scope.$index)"
  374. style="width: 200px">
  375. <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
  376. </el-select>
  377. </template>
  378. </el-table-column>
  379. <el-table-column label="二级分类" align="center" prop="twoLevelClassify" width="180">
  380. <template slot-scope="scope">
  381. <el-select v-model="monthGoalMergeDetailsList[scope.$index].twoLevelClassify" size="mini" clearable
  382. @focus="chooseTreeReferForDetails('MATERIALCLASSIFY_PARAM', false, '二级物料分类', scope.$index)"
  383. style="width: 200px">
  384. <el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id" />
  385. </el-select>
  386. </template>
  387. </el-table-column>
  388. <el-table-column label="物料" align="center" prop="material" width="180">
  389. <template slot-scope="scope">
  390. <el-popover-select-v2 v-model="monthGoalMergeDetailsList[scope.$index].material" title="物料" valueKey="name"
  391. referName="MATERIAL_PARAM"
  392. :dataMapping="{ materialCode: 'code', material: 'name'}"
  393. :source.sync="monthGoalMergeDetailsList[scope.$index]" placeholder="请输入物料">
  394. </el-popover-select-v2>
  395. </template>
  396. </el-table-column>
  397. <el-table-column label="月份" align="center" prop="num" width="250">
  398. <template slot-scope="scope">
  399. <el-date-picker v-model="monthGoalMergeDetailsList[scope.$index].monthly" value-format="M" type="month" placeholder="选择月份">
  400. </el-date-picker>
  401. </template>
  402. </el-table-column>
  403. <el-table-column label="目标值" align="center" prop="totalGoal" width="220">
  404. <template slot-scope="scope">
  405. <el-input-number @change="computeTotal" v-model="monthGoalMergeDetailsList[scope.$index].goalValue" :precision="2" :step="1" :min="0"></el-input-number>
  406. </template>
  407. </el-table-column>
  408. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px" fixed="right">
  409. <template slot-scope="scope">
  410. <el-button
  411. size="mini"
  412. type="text"
  413. icon="el-icon-delete"
  414. @click="handleDeleteDetails(scope.$index, scope.row)"
  415. >删除</el-button>
  416. <el-button
  417. size="mini"
  418. type="text"
  419. icon="el-icon-delete"
  420. @click="handleCopyDetails(scope.row)"
  421. >复制</el-button>
  422. </template>
  423. </el-table-column>
  424. </el-table>
  425. </el-drawer>
  426. <TreeRefers ref="treeQuery" @doSubmit="selectionsToInputForQuery" :single="true"/>
  427. <TreeRefers ref="treeMain" @doSubmit="selectionsToInputForMain" :single="true"/>
  428. <TreeRefers ref="treeDetails" @doSubmit="selectionsToInputForDetails" :single="true"/>
  429. </div>
  430. </template>
  431. <script>
  432. import {
  433. listMonthGoalMerge,
  434. getMonthGoalMerge,
  435. delMonthGoalMerge,
  436. addMonthGoalMerge,
  437. updateMonthGoalMerge
  438. } from "@/api/business/spd/goal_management/monthGoalMerge";
  439. import {
  440. getMonthSaleGoalDetails,
  441. delMonthSaleGoalDetails,
  442. mergeAnnualSaleMergeDetails
  443. } from "@/api/business/spd/goal_management/monthSaleGoalDetails"
  444. // 树形参照
  445. import TreeRefers from '@/components/Refers/treeRefer.vue'
  446. import ElPopoverSelectV2 from "@/components/popover-select-v2"
  447. export default {
  448. name: "MonthGoalMerge",
  449. components: {
  450. TreeRefers, ElPopoverSelectV2
  451. },
  452. data() {
  453. return {
  454. // 遮罩层
  455. loading: true,
  456. // 选中数组
  457. ids: [],
  458. // 非单个禁用
  459. single: true,
  460. // 非多个禁用
  461. multiple: true,
  462. // 显示搜索条件
  463. showSearch: true,
  464. // 总条数
  465. total: 0,
  466. // 月销售目标合并表格数据
  467. monthGoalMergeList: [],
  468. monthGoalMergeDetailsList: [],
  469. // 弹出层标题
  470. title: "",
  471. // 是否显示弹出层
  472. open: false,
  473. // 查询参数
  474. queryParams: {
  475. pageNum: 1,
  476. pageSize: 10,
  477. code: null,
  478. goalName: null,
  479. documentDate: null,
  480. annual: null,
  481. monthly: null,
  482. customCode: null,
  483. custom: null,
  484. creatorCode: null,
  485. creator: null,
  486. deptCode: null,
  487. dept: null,
  488. goalCategory: null,
  489. goalSum: null,
  490. documentStatus: null,
  491. deleteStatus: null,
  492. saleZoneCode: null,
  493. saleZone: null,
  494. oneLevelClassifyCode: null,
  495. oneLevelClassify: null,
  496. twoLevelClassifyCode: null,
  497. twoLevelClassify: null,
  498. documentDateRange: null
  499. },
  500. pickerOptions: {
  501. shortcuts: [{
  502. text: '最近一周',
  503. onClick(picker) {
  504. const end = new Date();
  505. const start = new Date();
  506. start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  507. picker.$emit('pick', [start, end]);
  508. }
  509. }, {
  510. text: '最近一个月',
  511. onClick(picker) {
  512. const end = new Date();
  513. const start = new Date();
  514. start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  515. picker.$emit('pick', [start, end]);
  516. }
  517. }, {
  518. text: '最近三个月',
  519. onClick(picker) {
  520. const end = new Date();
  521. const start = new Date();
  522. start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
  523. picker.$emit('pick', [start, end]);
  524. }
  525. }]
  526. },
  527. // 表单参数
  528. form: {
  529. id: null,
  530. code: null,
  531. goalName: null,
  532. documentDate: null,
  533. annual: null,
  534. monthly: null,
  535. customCode: null,
  536. custom: null,
  537. creatorCode: null,
  538. creator: null,
  539. deptCode: null,
  540. dept: null,
  541. goalCategory: null,
  542. goalSum: null,
  543. documentStatus: null,
  544. saleZoneCode: null,
  545. saleZone: null,
  546. oneLevelClassifyCode: null,
  547. oneLevelClassify: null,
  548. twoLevelClassifyCode: null,
  549. twoLevelClassify: null,
  550. monthMergeDetailsList: null
  551. },
  552. formDetails: {
  553. id: null,
  554. code: null,
  555. saleOrg: null,
  556. saleZone: null,
  557. custom: null,
  558. dept: null,
  559. creator: null,
  560. department: null,
  561. oneLevelClassifyCode: null,
  562. oneLevelClassify: null,
  563. twoLevelClassifyCode: null,
  564. twoLevelClassify: null,
  565. materialCode: null,
  566. material: null,
  567. monthly: null,
  568. goalValue: null
  569. },
  570. // 表单校验
  571. rules: {},
  572. // 目标类型列表
  573. goalCategoryList: [
  574. { value: '客户维度', label: '客户维度' },
  575. { value: '销售区域', label: '销售区域' },
  576. { value: '一级分类', label: '一级分类' },
  577. { value: '二级分类', label: '二级分类' }
  578. ],
  579. // 树形参照
  580. referCondition: { type: '', isPage: true, title: '', index: null },
  581. classOptions: []
  582. };
  583. },
  584. created() {
  585. this.getList();
  586. },
  587. methods: {
  588. /** 查询月销售目标合并列表 */
  589. getList() {
  590. this.loading = true;
  591. listMonthGoalMerge(this.queryParams).then(response => {
  592. this.monthGoalMergeList = response.rows;
  593. this.total = response.total;
  594. this.loading = false;
  595. });
  596. },
  597. getListDetails() {
  598. this.loading = true;
  599. getMonthSaleGoalDetails(this.form.id).then(response => {
  600. this.monthGoalMergeDetailsList = response.data;
  601. this.computeTotal()
  602. this.form.monthMergeDetailsList = this.monthGoalMergeDetailsList
  603. updateMonthGoalMerge(this.form).then(response => {})
  604. this.loading = false;
  605. });
  606. },
  607. // 取消按钮
  608. cancel() {
  609. this.open = false;
  610. this.reset();
  611. },
  612. // 表单重置
  613. reset() {
  614. this.form = {
  615. id: null,
  616. code: null,
  617. goalName: null,
  618. documentDate: null,
  619. annual: null,
  620. monthly: null,
  621. customCode: null,
  622. custom: null,
  623. creatorCode: null,
  624. creator: null,
  625. deptCode: null,
  626. dept: null,
  627. goalCategory: null,
  628. goalSum: null,
  629. documentStatus: null,
  630. saleZoneCode: null,
  631. saleZone: null,
  632. oneLevelClassifyCode: null,
  633. oneLevelClassify: null,
  634. twoLevelClassifyCode: null,
  635. twoLevelClassify: null
  636. };
  637. this.resetForm("form");
  638. },
  639. /** 搜索按钮操作 */
  640. handleQuery() {
  641. this.queryParams.pageNum = 1;
  642. this.getList();
  643. },
  644. /** 重置按钮操作 */
  645. resetQuery() {
  646. this.resetForm("queryForm");
  647. this.handleQuery();
  648. },
  649. // 多选框选中数据
  650. handleSelectionChange(selection) {
  651. this.ids = selection.map(item => item.id)
  652. this.single = selection.length !== 1
  653. this.multiple = !selection.length
  654. },
  655. /** 新增按钮操作 */
  656. handleAdd() {
  657. this.reset();
  658. this.open = true;
  659. this.title = "添加月销售目标合并";
  660. },
  661. handleAddDetails() {
  662. let list = {
  663. id: null,
  664. code: null,
  665. saleOrg: null,
  666. saleZone: null,
  667. custom: null,
  668. dept: null,
  669. creator: null,
  670. oneLevelClassifyCode: null,
  671. oneLevelClassify: null,
  672. twoLevelClassifyCode: null,
  673. twoLevelClassify: null,
  674. materialCode: null,
  675. material: null,
  676. department: null,
  677. num: null,
  678. monthly: null,
  679. goalValue: null
  680. }
  681. this.monthGoalMergeDetailsList.push(list)
  682. },
  683. /** 修改按钮操作 */
  684. handleUpdate(row) {
  685. this.reset();
  686. const id = row.id || this.ids
  687. getMonthGoalMerge(id).then(response => {
  688. this.form = response.data;
  689. this.open = true;
  690. this.title = "修改月销售目标合并";
  691. });
  692. },
  693. /** 提交按钮 */
  694. submitForm() {
  695. this.$refs["form"].validate(valid => {
  696. if (valid) {
  697. if (this.form.id !== null) {
  698. this.form.monthMergeDetailsList = this.monthGoalMergeDetailsList
  699. updateMonthGoalMerge(this.form).then(response => {
  700. this.$modal.msgSuccess("修改成功");
  701. this.open = false;
  702. this.getList();
  703. });
  704. } else {
  705. this.form.documentStatus = '未提交'
  706. this.form.monthMergeDetailsList = this.monthGoalMergeDetailsList
  707. console.log(this.form);
  708. addMonthGoalMerge(this.form).then(response => {
  709. this.$modal.msgSuccess("新增成功");
  710. this.open = false;
  711. this.getList();
  712. });
  713. }
  714. }
  715. });
  716. },
  717. /** 删除按钮操作 */
  718. handleDelete(row) {
  719. const ids = row.id || this.ids;
  720. this.$modal.confirm('是否确认删除月销售目标合并编号为"' + ids + '"的数据项?').then(function () {
  721. return delMonthGoalMerge(ids);
  722. }).then(() => {
  723. this.getList();
  724. this.$modal.msgSuccess("删除成功");
  725. }).catch(() => {
  726. });
  727. },
  728. handleDeleteDetails(index, row) {
  729. if (this.form.id === null) {
  730. this.monthGoalMergeDetailsList.splice(index, 1)
  731. this.computeTotal()
  732. } else {
  733. if (row.id !== null) {
  734. this.$modal.confirm('是否确认删除月销售目标合并明细编号为"' + row.id + '"的数据项?').then(function () {
  735. return delMonthSaleGoalDetails(row.id);
  736. }).then(() => {
  737. this.getListDetails();
  738. this.$modal.msgSuccess("删除成功");
  739. }).catch(() => {
  740. });
  741. } else {
  742. this.monthGoalMergeDetailsList.splice(index, 1)
  743. this.$message.success('删除成功')
  744. this.computeTotal()
  745. }
  746. }
  747. },
  748. /** 导出按钮操作 */
  749. handleExport() {
  750. this.download('goal_management/monthGoalMerge/export', {
  751. ...this.queryParams
  752. }, `monthGoalMerge${new Date().getTime()}.xlsx`)
  753. },
  754. // 树形参照
  755. chooseTreeReferForQuery(type, isPage, title) {
  756. this.referCondition.type = type
  757. this.referCondition.isPage = isPage
  758. this.referCondition.title = title
  759. this.$refs.treeQuery.init(this.referCondition)
  760. },
  761. chooseTreeReferForMain(type, isPage, title) {
  762. this.referCondition.type = type
  763. this.referCondition.isPage = isPage
  764. this.referCondition.title = title
  765. this.$refs.treeMain.init(this.referCondition)
  766. },
  767. chooseTreeReferForDetails(type, isPage, title, index) {
  768. this.referCondition.type = type
  769. this.referCondition.isPage = isPage
  770. this.referCondition.title = title
  771. this.referCondition.index = index
  772. this.$refs.treeDetails.init(this.referCondition)
  773. },
  774. selectionsToInputForQuery(selection) {
  775. this.classOptions.push(selection)
  776. if (this.referCondition.title === '一级物料分类') {
  777. if (selection.code.length !== 1) {
  778. return this.$message.info('请在一级分类下选择')
  779. }
  780. this.queryParams.oneLevelClassifyCode = selection.code
  781. this.queryParams.oneLevelClassify = selection.name
  782. } else if (this.referCondition.title === '二级物料分类') {
  783. if (selection.code.length !== 4) {
  784. return this.$message.info('请在二级分类下选择')
  785. }
  786. this.queryParams.twoLevelClassifyCode = selection.code
  787. this.queryParams.twoLevelClassify = selection.name
  788. }
  789. },
  790. selectionsToInputForMain(selection) {
  791. this.classOptions.push(selection)
  792. if (this.referCondition.title === '一级物料分类') {
  793. if (selection.code.length !== 1) {
  794. return this.$message.info('请在一级分类下选择')
  795. }
  796. this.form.oneLevelClassifyCode = selection.code
  797. this.form.oneLevelClassify = selection.name
  798. } else if (this.referCondition.title === '二级物料分类') {
  799. if (selection.code.length !== 4) {
  800. return this.$message.info('请在二级分类下选择')
  801. }
  802. this.form.twoLevelClassifyCode = selection.code
  803. this.form.twoLevelClassify = selection.name
  804. }
  805. },
  806. selectionsToInputForDetails(selection) {
  807. this.classOptions.push(selection)
  808. if (this.referCondition.title === '一级物料分类') {
  809. if (selection.code.length !== 1) {
  810. return this.$message.info('请在一级分类中选择')
  811. }
  812. if (selection.code !== this.monthGoalMergeDetailsList[this.referCondition.index].oneLevelClassifyCode) {
  813. this.monthGoalMergeDetailsList[this.referCondition.index].twoLevelClassifyCode = null
  814. this.monthGoalMergeDetailsList[this.referCondition.index].twoLevelClassify = null
  815. }
  816. this.monthGoalMergeDetailsList[this.referCondition.index].oneLevelClassifyCode = selection.code
  817. this.monthGoalMergeDetailsList[this.referCondition.index].oneLevelClassify = selection.name
  818. } else if (this.referCondition.title === '二级物料分类') {
  819. if (selection.code.length !== 4) {
  820. return this.$message.info('请在二级分类中选择')
  821. } else if (selection.code[0] !== this.monthGoalMergeDetailsList[this.referCondition.index].oneLevelClassifyCode) {
  822. return this.$message.error('所选择的二级物料分类不属于一级分类')
  823. }
  824. this.monthGoalMergeDetailsList[this.referCondition.index].twoLevelClassifyCode = selection.code
  825. this.monthGoalMergeDetailsList[this.referCondition.index].twoLevelClassify = selection.name
  826. }
  827. },
  828. // 改变查询表单的目标分类
  829. changeGoalCategoryQuery() {
  830. let condition = this.queryParams.goalCategory
  831. if (condition === null) {
  832. this.queryParams.custom = null
  833. this.queryParams.customCode = null
  834. this.queryParams.saleZone = null
  835. this.queryParams.saleZoneCode = null
  836. this.queryParams.oneLevelClassify = null
  837. this.queryParams.oneLevelClassifyCode = null
  838. this.queryParams.twoLevelClassify = null
  839. this.queryParams.twoLevelClassifyCode = null
  840. } else if (condition === '客户维度') {
  841. this.queryParams.saleZone = null
  842. this.queryParams.saleZoneCode = null
  843. this.queryParams.oneLevelClassify = null
  844. this.queryParams.oneLevelClassifyCode = null
  845. this.queryParams.twoLevelClassify = null
  846. this.queryParams.twoLevelClassifyCode = null
  847. } else if (condition === '销售区域') {
  848. this.queryParams.custom = null
  849. this.queryParams.customCode = null
  850. this.queryParams.oneLevelClassify = null
  851. this.queryParams.oneLevelClassifyCode = null
  852. this.queryParams.twoLevelClassify = null
  853. this.queryParams.twoLevelClassifyCode = null
  854. } else if (condition === '一级分类') {
  855. this.queryParams.custom = null
  856. this.queryParams.customCode = null
  857. this.queryParams.saleZone = null
  858. this.queryParams.saleZoneCode = null
  859. this.queryParams.twoLevelClassify = null
  860. this.queryParams.twoLevelClassifyCode = null
  861. } else if (condition === '二级分类') {
  862. this.queryParams.custom = null
  863. this.queryParams.customCode = null
  864. this.queryParams.saleZone = null
  865. this.queryParams.saleZoneCode = null
  866. this.queryParams.oneLevelClassify = null
  867. this.queryParams.oneLevelClassifyCode = null
  868. }
  869. },
  870. changeGoalCategoryForm() {
  871. let condition = this.form.goalCategory
  872. if (condition === null) {
  873. this.form.custom = null
  874. this.form.customCode = null
  875. this.form.saleZone = null
  876. this.form.saleZoneCode = null
  877. this.form.oneLevelClassify = null
  878. this.form.oneLevelClassifyCode = null
  879. this.form.twoLevelClassify = null
  880. this.form.twoLevelClassifyCode = null
  881. } else if (condition === '客户维度') {
  882. this.form.saleZone = null
  883. this.form.saleZoneCode = null
  884. this.form.oneLevelClassify = null
  885. this.form.oneLevelClassifyCode = null
  886. this.form.twoLevelClassify = null
  887. this.form.twoLevelClassifyCode = null
  888. } else if (condition === '销售区域') {
  889. this.form.custom = null
  890. this.form.customCode = null
  891. this.form.oneLevelClassify = null
  892. this.form.oneLevelClassifyCode = null
  893. this.form.twoLevelClassify = null
  894. this.form.twoLevelClassifyCode = null
  895. } else if (condition === '一级分类') {
  896. this.form.custom = null
  897. this.form.customCode = null
  898. this.form.saleZone = null
  899. this.form.saleZoneCode = null
  900. this.form.twoLevelClassify = null
  901. this.form.twoLevelClassifyCode = null
  902. } else if (condition === '二级分类') {
  903. this.form.custom = null
  904. this.form.customCode = null
  905. this.form.saleZone = null
  906. this.form.saleZoneCode = null
  907. this.form.oneLevelClassify = null
  908. this.form.oneLevelClassifyCode = null
  909. }
  910. },
  911. // 关闭抽屉
  912. handleClose(done) {
  913. this.$confirm('确认关闭?')
  914. .then(_ => {
  915. done();
  916. this.resetQuery()
  917. })
  918. .catch(_ => {});
  919. },
  920. // 复制明细
  921. handleCopyDetails(row) {
  922. let list = {
  923. id: null,
  924. code: row.code,
  925. saleOrg: row.saleOrg,
  926. saleZone: row.saleZone,
  927. custom: row.custom,
  928. dept: row.dept,
  929. creator: row.creator,
  930. oneLevelClassifyCode: row.oneLevelClassifyCode,
  931. oneLevelClassify: row.oneLevelClassify,
  932. twoLevelClassifyCode: row.twoLevelClassifyCode,
  933. twoLevelClassify: row.twoLevelClassify,
  934. materialCode: row.materialCode,
  935. material: row.material,
  936. department: row.department,
  937. num: row.num,
  938. monthly: row.monthly,
  939. goalValue: row.goalValue
  940. }
  941. this.monthGoalMergeDetailsList.push(list)
  942. this.computeTotal()
  943. },
  944. // 计算主表合计
  945. computeTotal() {
  946. let list = this.monthGoalMergeDetailsList
  947. let sum = 0
  948. for (const listElement of list) {
  949. sum = (sum * 1000000 + listElement.goalValue * 1000000) / 1000000
  950. }
  951. this.form.goalSum = sum
  952. },
  953. // 合并数据
  954. clickMerge() {
  955. let classify = this.form.goalCategory
  956. let classifyValue;
  957. if (classify === null || classify === '') {
  958. return this.$message.error('请输入目标分类')
  959. } else if (classify === '销售区域') {
  960. classifyValue = this.form.saleZone
  961. if (classifyValue === null) {
  962. return this.$message.error('请输入销售区域')
  963. }
  964. } else if (classify === '一级分类') {
  965. classifyValue = this.form.oneLevelClassify
  966. if (classifyValue === null) {
  967. return this.$message.error('请输入一级分类')
  968. }
  969. } else if (classify === '二级分类') {
  970. classifyValue = this.form.twoLevelClassify
  971. if (classifyValue === null) {
  972. return this.$message.error('请输入二级分类')
  973. }
  974. }
  975. let query = { classify: classify, classifyValue: classifyValue }
  976. mergeAnnualSaleMergeDetails(query).then(response => {
  977. console.log(response);
  978. this.annualSaleGoalMergeDetailsList = response.data.consolidatedDetail
  979. if (classify !== '销售区域') {
  980. this.areaDetailList = []
  981. this.customerDetailList = []
  982. } else {
  983. this.areaDetailList = response.data.areaDetail
  984. this.customerDetailList = response.data.customerDetail
  985. }
  986. this.computeTotal()
  987. })
  988. }
  989. }
  990. };
  991. </script>