engin_form.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  1. <template>
  2. <div class="detail-container">
  3. <el-page-header @back="goBack" :content="listItem ? '编辑':'新增'"></el-page-header>
  4. <div class="main-title">
  5. <div class="title">工程信息单</div>
  6. </div>
  7. <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules" label-width="100px" size="small" label-position="right">
  8. <el-row :gutter="20">
  9. <el-col :xs="24" :sm="12" :lg="8">
  10. <el-form-item label="工程信息单" prop="orderNum">
  11. <el-input v-model="mainForm.orderNum" placeholder="系统自动生成" disabled></el-input>
  12. </el-form-item>
  13. </el-col>
  14. <el-col :xs="24" :sm="12" :lg="8" style="height: 51px;">
  15. <el-form-item label="单据日期" prop="orderDate">
  16. <el-date-picker
  17. v-model="mainForm.orderDate"
  18. disabled
  19. type="date"
  20. value-format="yyyy-MM-dd"
  21. style="width: 100%;"
  22. placeholder="系统自动生成">
  23. </el-date-picker>
  24. </el-form-item>
  25. </el-col>
  26. <!-- <el-col :xs="24" :sm="12" :lg="8">
  27. <el-form-item label="产品大类" prop="mainId">
  28. <el-select v-model="mainForm.mainId" placeholder="选择产品大类" style="width: 100%">
  29. <el-option v-for="item in typeList" :key="item.dictCode" :label="item.dictValue" :value="item.dictCode"></el-option>
  30. </el-select>
  31. </el-form-item>
  32. </el-col> -->
  33. </el-row>
  34. <el-row :gutter="20">
  35. <el-col :xs="24" :sm="12" :lg="8">
  36. <el-form-item label="经销商编码" prop="jxsNum">
  37. <el-input v-model="mainForm.jxsNum" placeholder="请输入经销商编码" disabled></el-input>
  38. </el-form-item>
  39. </el-col>
  40. <el-col :xs="24" :sm="12" :lg="8">
  41. <el-form-item label="项目名称" prop="enginName">
  42. <el-input v-model="mainForm.enginName" placeholder="请输入项目名称"></el-input>
  43. </el-form-item>
  44. </el-col>
  45. <el-col :xs="24" :sm="12" :lg="8">
  46. <el-form-item label="单据类型" prop="orderType">
  47. <el-input v-model="mainForm.orderType" placeholder="请输入单据类型"></el-input>
  48. </el-form-item>
  49. </el-col>
  50. <el-col :xs="24" :sm="12" :lg="8">
  51. <el-form-item label="经销商名称" prop="jxsName">
  52. <el-input v-model="mainForm.jxsName" placeholder="请输入经销商名称" disabled></el-input>
  53. </el-form-item>
  54. </el-col>
  55. <el-col :xs="24" :sm="12" :lg="8">
  56. <el-form-item label="使用单位" prop="company">
  57. <el-input v-model="mainForm.company" placeholder="请输入使用单位"></el-input>
  58. </el-form-item>
  59. </el-col>
  60. <el-col :xs="24" :sm="12" :lg="8">
  61. <el-form-item label="安装地址" prop="address">
  62. <el-input v-model="mainForm.address" placeholder="请输入安装地址"></el-input>
  63. </el-form-item>
  64. </el-col>
  65. <el-col :xs="24" :sm="12" :lg="8">
  66. <el-form-item label="工程编号" prop="enginNum">
  67. <el-input v-model="mainForm.enginNum" placeholder="请输入工程编号"></el-input>
  68. </el-form-item>
  69. </el-col>
  70. <el-col :xs="24" :sm="12" :lg="8">
  71. <el-form-item label="厂工程编码" prop="factoryNum">
  72. <el-input v-model="mainForm.factoryNum" placeholder="请输入厂工程编码"></el-input>
  73. </el-form-item>
  74. </el-col>
  75. <el-col :xs="24" :sm="12" :lg="8">
  76. <el-form-item label="工程登录类型" prop="loginType">
  77. <el-input v-model="mainForm.loginType" placeholder="请输入工程登录类型"></el-input>
  78. </el-form-item>
  79. </el-col>
  80. <el-col :xs="24" :sm="12" :lg="8">
  81. <el-form-item label="联系人" prop="linkman">
  82. <el-input v-model="mainForm.linkman" placeholder="请输入联系人"></el-input>
  83. </el-form-item>
  84. </el-col>
  85. <el-col :xs="24" :sm="12" :lg="8">
  86. <el-form-item label="联系电话" prop="phone">
  87. <el-input v-model="mainForm.phone" placeholder="请输入联系电话"></el-input>
  88. </el-form-item>
  89. </el-col>
  90. <el-col :xs="24" :sm="12" :lg="8">
  91. <el-form-item label="固定电话" prop="tel">
  92. <el-input v-model="mainForm.tel" placeholder="请输入固定电话"></el-input>
  93. </el-form-item>
  94. </el-col>
  95. <el-col :xs="24" :sm="24" :lg="16">
  96. <el-form-item label="备注" prop="remark">
  97. <el-input v-model="mainForm.remark" placeholder="请输入备注"></el-input>
  98. </el-form-item>
  99. </el-col>
  100. <el-col :xs="24" :sm="12" :lg="8">
  101. <el-form-item label="业务员" prop="salesMan">
  102. <el-input v-model="mainForm.salesMan" placeholder="请输入业务员" disabled></el-input>
  103. </el-form-item>
  104. </el-col>
  105. <el-col :xs="24" :sm="12" :lg="8">
  106. <el-form-item label="制单人" prop="createMan">
  107. <el-input v-model="mainForm.createMan" placeholder="请输入制单人" disabled></el-input>
  108. </el-form-item>
  109. </el-col>
  110. <el-col :xs="24" :sm="12" :lg="8" style="height: 51px;">
  111. <el-form-item label="制单日期" prop="createDate">
  112. <el-date-picker
  113. v-model="mainForm.createDate"
  114. type="date"
  115. disabled
  116. value-format="yyyy-MM-dd"
  117. style="width: 100%;"
  118. placeholder="选择日期">
  119. </el-date-picker>
  120. </el-form-item>
  121. </el-col>
  122. <el-col :xs="24" :sm="12" :lg="8" style="height: 51px;">
  123. <el-form-item label="合同有效期" prop="contractDate">
  124. <el-date-picker
  125. v-model="mainForm.contractDate"
  126. type="date"
  127. value-format="yyyy-MM-dd"
  128. style="width: 100%;"
  129. placeholder="选择日期">
  130. </el-date-picker>
  131. </el-form-item>
  132. </el-col>
  133. </el-row>
  134. </el-form>
  135. <div class="main-title">
  136. <div class="title">货品信息</div>
  137. </div>
  138. <div class="table" style="margin-top: 20px">
  139. <el-table :data="goodsList" element-loading-text="Loading" border fit highlight-current-row stripe max-height="400">
  140. <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
  141. <el-table-column align="center" label="销售类型" prop="saleTypeId" min-width="160" show-overflow-tooltip>
  142. <template slot-scope="scope">
  143. <el-select v-model="scope.row.saleTypeId" placeholder="选择销售类型" size="small" @change="changeSaleType(scope.$index)">
  144. <el-option
  145. v-for="item in salesTypeList"
  146. :key="item.id"
  147. :label="item.saleName"
  148. :value="item.id">
  149. </el-option>
  150. </el-select>
  151. </template>
  152. </el-table-column>
  153. <el-table-column align="center" label="产品名称" prop="materialNumber" min-width="160" show-overflow-tooltip>
  154. <template slot-scope="scope">
  155. <el-select v-model="scope.row.materialNumber" placeholder="选择产品" size="small" @change="changeGoods(scope.$index)" :disabled="!scope.row.saleTypeId">
  156. <el-option
  157. v-for="item in scope.row.productList"
  158. :key="item.number"
  159. :label="item.name"
  160. :value="item.number">
  161. </el-option>
  162. </el-select>
  163. </template>
  164. </el-table-column>
  165. <el-table-column align="center" label="产品编码" prop="materialNumber" min-width="120" show-overflow-tooltip></el-table-column>
  166. <el-table-column align="center" label="规格型号" prop="specification" min-width="200" show-overflow-tooltip></el-table-column>
  167. <el-table-column align="center" label="单位" prop="unit" min-width="100" show-overflow-tooltip></el-table-column>
  168. <el-table-column align="center" label="单价" prop="price" min-width="100" show-overflow-tooltip></el-table-column>
  169. <el-table-column align="center" label="数量" prop="qty" min-width="100" show-overflow-tooltip>
  170. <template slot-scope="scope">
  171. <el-input v-model="scope.row.qty" size="small" type="number"></el-input>
  172. </template>
  173. </el-table-column>
  174. <el-table-column align="center" label="订单金额" min-width="100" show-overflow-tooltip>
  175. <template slot-scope="scope">
  176. {{(scope.row.price || 0) * (scope.row.qty || 0)}}
  177. </template>
  178. </el-table-column>
  179. <el-table-column align="center" label="备注" prop="remark" min-width="200" show-overflow-tooltip>
  180. <template slot-scope="scope">
  181. <el-input v-model="scope.row.remark" size="small"></el-input>
  182. </template>
  183. </el-table-column>
  184. <el-table-column align="center" label="税率" prop="taxRate" min-width="100" show-overflow-tooltip></el-table-column>
  185. <el-table-column align="center" label="操作" width="100" fixed="right">
  186. <template slot-scope="scope">
  187. <el-button type="text" @click="deleteItem(scope.$index)">删除</el-button>
  188. </template>
  189. </el-table-column>
  190. </el-table>
  191. <div class="add"><el-button type="text" icon="el-icon-plus" @click="addGoods">添加产品</el-button></div>
  192. </div>
  193. <div class="page-footer">
  194. <div class="footer">
  195. <el-button type="primary" @click="clickSubmitForm(1)">保 存</el-button>
  196. <el-button type="primary" @click="clickSubmitForm(2)">提交审核</el-button>
  197. <el-popconfirm title="确定关闭吗?" @onConfirm="goBack" style="margin-left: 10px;">
  198. <el-button slot="reference">关 闭</el-button>
  199. </el-popconfirm>
  200. </div>
  201. </div>
  202. </div>
  203. </template>
  204. <script>
  205. import { getEnginDetail, getRetailProductList, addEngin, editEngin, submitEngin } from "@/api/supply/engin";
  206. import { getDictList, getTypeList } from '@/api/common'
  207. export default {
  208. name: 'EnginForm',
  209. componentName: 'EnginForm',
  210. props: ['listItem'],
  211. data() {
  212. return {
  213. goodsList: [],
  214. mainForm: {
  215. orderNum: '',
  216. orderDate: '',
  217. // mainId: '102',
  218. jxsNum: '',
  219. enginName: '',
  220. orderType: '',
  221. jxsName: '',
  222. company: '',
  223. address: '',
  224. enginNum: '',
  225. factoryNum: '',
  226. loginType: '',
  227. linkman: '',
  228. phone: '',
  229. tel: '',
  230. remark: '',
  231. salesMan: '',
  232. createMan: '',
  233. createDate: '',
  234. contractDate: '',
  235. },
  236. mainFormRules: {
  237. // orderDate: [{ required: true, message: '请选择单据日期', trigger: 'change' }],
  238. jxsNum: [{ required: true, message: '请输入经销商编码', trigger: 'blur' }],
  239. enginName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  240. jxsName: [{ required: true, message: '请输入经销商名称', trigger: 'blur' }],
  241. company: [{ required: true, message: '请输入使用单位', trigger: 'blur' }],
  242. address: [{ required: true, message: '请输入安装地址', trigger: 'blur' }],
  243. },
  244. typeList: [],
  245. salesTypeList: [],
  246. retailProductList: [],
  247. }
  248. },
  249. created() {
  250. this.getDictList();
  251. this.getTypeList();
  252. if(this.listItem) {
  253. this.getDetail();
  254. }else {
  255. this.mainForm.jxsNum = JSON.parse(localStorage.getItem("supply_user")).customerNumber;
  256. this.mainForm.jxsName = JSON.parse(localStorage.getItem("supply_user")).customerName;
  257. this.mainForm.createMan = JSON.parse(localStorage.getItem("supply_user")).nickName;
  258. this.mainForm.createDate = this.getDate(0);
  259. this.mainForm.contractDate = this.getDate(1);
  260. }
  261. },
  262. methods: {
  263. // 返回列表
  264. goBack() {
  265. this.$emit('backListFormDetail');
  266. },
  267. getDate(addYear) {
  268. var date = new Date();
  269. var seperator1 = "-";
  270. var year = date.getFullYear() + addYear;
  271. var month = date.getMonth() + 1;
  272. var strDate = date.getDate();
  273. if (month >= 1 && month <= 9) {
  274. month = "0" + month;
  275. }
  276. if (strDate >= 0 && strDate <= 9) {
  277. strDate = "0" + strDate;
  278. }
  279. var currentdate = year + seperator1 + month + seperator1 + strDate;
  280. return currentdate;
  281. },
  282. // 获取详情
  283. getDetail() {
  284. getEnginDetail({id: this.listItem.enginInfoId}).then(res => {
  285. let data = res.data;
  286. this.mainForm.orderNum = data.enginInfoNo;
  287. this.mainForm.orderDate = data.orderDate;
  288. // this.mainForm.mainId = data.productCategoryId;
  289. this.mainForm.jxsNum = data.customerNumber;
  290. this.mainForm.enginName = data.projectName;
  291. this.mainForm.orderType = data.orderType;
  292. this.mainForm.jxsName = data.customerName;
  293. this.mainForm.company = data.useUnit;
  294. this.mainForm.address = data.installAddress;
  295. this.mainForm.enginNum = data.projectNo;
  296. this.mainForm.factoryNum = data.enginFactoryNo;
  297. this.mainForm.loginType = data.enginSignType;
  298. this.mainForm.linkman = data.linkman;
  299. this.mainForm.phone = data.phone;
  300. this.mainForm.tel = data.tel;
  301. this.mainForm.remark = data.remark;
  302. this.mainForm.salesMan = data.serviceId;
  303. this.mainForm.createMan = data.createName;
  304. this.mainForm.createDate = data.createTime;
  305. this.mainForm.contractDate = data.contractExpireDate;
  306. this.goodsList = data.items;
  307. for (let i = 0; i < this.goodsList.length; i++) {
  308. this.getRetailProductList(i);
  309. }
  310. })
  311. },
  312. // 获取产品大类列表
  313. getDictList() {
  314. getDictList({sysDictEnum: 'PRODUCT_TYPE'}).then(res => {
  315. this.typeList = res.data;
  316. })
  317. },
  318. // 获取销售类型列表
  319. getTypeList() {
  320. getTypeList({
  321. pageNum: 1,
  322. pageSize: -1,
  323. }).then((res) => {
  324. this.salesTypeList = res.data.records;
  325. });
  326. },
  327. // 获取商品列表
  328. getRetailProductList(index) {
  329. getRetailProductList({
  330. pageNum: 1,
  331. pageSize: -1,
  332. saleId: this.goodsList[index].saleTypeId
  333. }).then(res => {
  334. let item = this.goodsList[index];
  335. item.productList = res.data.records;
  336. this.$set(this.goodsList, index, item);
  337. })
  338. },
  339. // 修改销售类型
  340. changeSaleType(index) {
  341. if(this.goodsList[index].saleTypeId) {
  342. let obj = this.salesTypeList.find(o => o.id == this.goodsList[index].saleTypeId);
  343. this.goodsList[index].saleTypeName = obj.saleName;
  344. this.goodsList[index].saleTypeCode = obj.saleCode;
  345. }
  346. this.goodsList[index].materialNumber = '';
  347. this.goodsList[index].materialName = '';
  348. this.goodsList[index].materialId = '';
  349. this.goodsList[index].specification = '';
  350. this.goodsList[index].unit = '';
  351. this.goodsList[index].price = '';
  352. this.goodsList[index].taxRate = '';
  353. this.getRetailProductList(index);
  354. },
  355. // 修改产品
  356. changeGoods(index) {
  357. if(this.goodsList[index].materialNumber) {
  358. let obj = this.goodsList[index].productList.find(o => o.number == this.goodsList[index].materialNumber);
  359. let item = this.goodsList[index];
  360. item.materialName = obj.name;
  361. item.materialId = obj.materialId;
  362. item.specification = obj.specification;
  363. item.unit = obj.unit;
  364. item.price = obj.batchPrice;
  365. item.taxRate = obj.taxRate;
  366. this.$set(this.goodsList, index, item);
  367. }
  368. },
  369. // 添加产品
  370. addGoods() {
  371. this.goodsList.push({})
  372. },
  373. // 删除产品
  374. deleteItem(index) {
  375. this.goodsList.splice(index, 1);
  376. },
  377. clickSubmitForm(type) {
  378. this.$refs.mainForm.validate((valid) => {
  379. if (valid) {
  380. for(let i=0; i<this.goodsList.length; i++) {
  381. if(!this.goodsList[i].saleTypeId) {
  382. this.$errorMsg('请选择销售类型');
  383. return;
  384. }
  385. if(!this.goodsList[i].materialNumber) {
  386. this.$errorMsg('请选择产品');
  387. return;
  388. }
  389. if(!this.goodsList[i].qty) {
  390. this.$errorMsg('请输入数量');
  391. return;
  392. }
  393. }
  394. let goodsList = JSON.parse(JSON.stringify(this.goodsList));
  395. goodsList.forEach(item => {
  396. delete item.productList;
  397. })
  398. let params = {
  399. // orderDate: this.mainForm.orderDate + ' 00:00:00',
  400. // mainId: this.mainForm.mainId,
  401. projectName: this.mainForm.enginName,
  402. orderType: this.mainForm.orderType,
  403. useUnit: this.mainForm.company,
  404. installAddress: this.mainForm.address,
  405. projectNo: this.mainForm.enginNum,
  406. enginFactoryNo: this.mainForm.factoryNum,
  407. enginSignType: this.mainForm.loginType,
  408. linkman: this.mainForm.linkman,
  409. phone: this.mainForm.phone,
  410. tel: this.mainForm.tel,
  411. remark: this.mainForm.remark,
  412. contractExpireDate: this.mainForm.contractDate,
  413. items: goodsList
  414. }
  415. if(type === 1) {
  416. if(this.listItem) {
  417. params.enginInfoId = this.listItem.enginInfoId;
  418. editEngin(params).then(res => {
  419. this.$successMsg('编辑成功');
  420. this.goBack();
  421. this.$parent.getList();
  422. })
  423. }else {
  424. addEngin(params).then(res => {
  425. this.$successMsg('保存成功');
  426. this.goBack();
  427. this.$parent.getList();
  428. })
  429. }
  430. }else {
  431. if(this.listItem) {
  432. params.enginInfoId = this.listItem.enginInfoId;
  433. }
  434. submitEngin(params).then(res => {
  435. this.$successMsg('提交审核成功');
  436. this.goBack();
  437. this.$parent.getList();
  438. })
  439. }
  440. }
  441. })
  442. },
  443. }
  444. }
  445. </script>
  446. <style scoped lang="scss">
  447. .detail-container {
  448. width: 100%;
  449. height: 100%;
  450. }
  451. .main-title {
  452. display: flex;
  453. justify-content: space-between;
  454. align-items: center;
  455. margin-top: 20px;
  456. height: 60px;
  457. border-bottom: 1px solid #DCDFE6;
  458. margin-bottom: 20px;
  459. .title {
  460. font-size: 16px;
  461. font-weight: 600;
  462. padding-left: 10px;
  463. }
  464. }
  465. .add {
  466. display: flex;
  467. align-items: center;
  468. justify-content: center;
  469. border: 1px solid #EBEEF5;
  470. border-top: none;
  471. height: 50px;
  472. }
  473. ::v-deep input::-webkit-outer-spin-button,
  474. ::v-deep input::-webkit-inner-spin-button {
  475. -webkit-appearance: none;
  476. }
  477. ::v-deep input[type='number'] {
  478. -moz-appearance: textfield;
  479. }
  480. </style>