settlementSet.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423
  1. <template>
  2. <div class="settlementSet-page">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="settlementSet-baseInfo">
  5. <template slot="subTitle">
  6. <a href="javascript:;" @click="handleBack" id="settlementSet-handleBack">
  7. <a-icon type="left"></a-icon> 返回列表
  8. </a>
  9. <span style="margin: 0 15px;color: #666;font-weight: bold;">{{ pageInfo&&pageInfo.shelfName?pageInfo.shelfName:'--' }}</span>
  10. </template>
  11. </a-page-header>
  12. <a-card :bordered="false" size="small" class="settlementSet-baseInfo">
  13. <a-collapse :activeKey="['1']">
  14. <a-collapse-panel key="1" header="基础信息">
  15. <a-descriptions size="small" :column="3">
  16. <a-descriptions-item label="配件经销商">{{ pageInfo&&pageInfo.dealerName?pageInfo.dealerName:'--' }}</a-descriptions-item>
  17. <a-descriptions-item label="汽车修理厂">{{ pageInfo&&pageInfo.storeName?pageInfo.storeName:'--' }}</a-descriptions-item>
  18. <a-descriptions-item label="货架归属">{{ pageInfo&&pageInfo.ownerType==1?'自有':'平台' }}</a-descriptions-item>
  19. <a-descriptions-item label="货架图片" v-if="pageInfo&&pageInfo.ownerType==1">
  20. <div v-if="pageInfo && pageInfo.images&&pageInfo.images.length>0">
  21. <img :src="pageInfo.images[0]|| ''" width="30" height="30" class="imageUrl" @click="inited(pageInfo.images)" /> {{ '共'+pageInfo.images.length+'张' }}
  22. </div>
  23. <span v-else>--</span>
  24. </a-descriptions-item>
  25. <a-descriptions-item label="备注">{{ pageInfo&&pageInfo.remarks?pageInfo.remarks:'--' }}</a-descriptions-item>
  26. </a-descriptions>
  27. </a-collapse-panel>
  28. </a-collapse>
  29. <a-collapse :activeKey="['1']" class="bzj-collapse" v-if="pageInfo&&pageInfo.settleType">
  30. <a-collapse-panel key="1" header="保证金 ( 保证金的新增/编辑/删除请在左侧菜单“保证金管理”功能中操作 )">
  31. <s-table
  32. class="sTable fixPagination"
  33. ref="table"
  34. size="small"
  35. rowKey="id"
  36. :showPagination="false"
  37. :columns="columns"
  38. :data="loadData"
  39. :defaultLoadData="true"
  40. bordered>
  41. <template slot="status" slot-scope="text, record">
  42. <a-button type="link" @click="handleEdit(record)" id="settlementSet-handleEdit">编辑</a-button>
  43. <a-button type="link" @click="handleDel(record)" id="settlementSet-handleDel">删除</a-button>
  44. <!-- <span v-if="!($hasPermissions('B_powerMD_user_edit') && record.superAdmin!=1) && !(record.loginFlag==1 && record.ownerOrgFlag==1 && $hasPermissions('B_powerMD_user_restPwd')) && !(record.loginFlag==0 && record.ownerOrgFlag==1 && $hasPermissions('B_powerMD_user_del'))">--</span> -->
  45. </template>
  46. </s-table>
  47. </a-collapse-panel>
  48. </a-collapse>
  49. </a-card>
  50. <a-card :bordered="false" size="small" class="pages-wrap">
  51. <div class="settlementSet-baseInfo">
  52. <a-form-model
  53. id="settlementSet-form"
  54. ref="ruleForm"
  55. :model="form"
  56. :rules="rules"
  57. :label-col="formItemLayout.labelCol"
  58. :wrapper-col="formItemLayout.wrapperCol"
  59. >
  60. <a-row :gutter="24">
  61. <a-row>
  62. <a-col :span="15">
  63. <a-form-model-item label="结算方式" prop="settleType">
  64. <v-select
  65. id="settlementSet-settleType"
  66. code="SHELF_SETTLE_TYPE"
  67. v-model="form.settleType"
  68. allowClear
  69. placeholder="请选择结算方式"
  70. :disabled="pageInfo&&pageInfo.settleType?true:false">
  71. </v-select>
  72. </a-form-model-item>
  73. </a-col>
  74. <a-col :span="1"><a-button
  75. size="small"
  76. type="link"
  77. id="settlementSet-handleModify"
  78. @click="handleModify(pageInfo,settleInfo)"
  79. v-if="pageInfo&&pageInfo.settleType"
  80. style="padding-top: 10px;">修改</a-button></a-col>
  81. </a-row>
  82. <a-row v-if="form.settleType=='CREDIT'">
  83. <a-col :span="15">
  84. <a-form-model-item label="授信额度" prop="creditLimit">
  85. <a-input-number
  86. id="settlementSet-creditLimit"
  87. v-model="form.creditLimit"
  88. :precision="2"
  89. :min="0.01"
  90. :max="999999"
  91. placeholder="请输入正数(最多允许两位小数)"
  92. style="width: 100%;display: inline-block;" />
  93. </a-form-model-item>
  94. </a-col>
  95. <a-col :span="1"> <span style="display: inline-block; padding: 10px;">元</span></a-col>
  96. </a-row>
  97. <a-col :span="15">
  98. <a-form-model-item label="结算日期" prop="settleDay" v-if="form.settleType=='MONTH'">
  99. <div style="display: flex;padding: 0;align-items: center;">
  100. <span style="display: inline-block;margin-right: 10px;">每月</span>
  101. <a-select
  102. style="background-color: none;width: 65%;"
  103. placeholder="请选择结算日期"
  104. id="settlementSet-settleDay"
  105. allowClear
  106. v-model="form.settleDay"
  107. >
  108. <a-select-option v-for="item in dateList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
  109. </a-select>
  110. <span style="display: inline-block;margin-left: 10px;">号</span>
  111. </div>
  112. </a-form-model-item>
  113. </a-col>
  114. <a-row v-if="form.settleType=='CREDIT'">
  115. <a-col :span="15">
  116. <a-form-model-item label="结算提醒金额" prop="creditWarnLimit" >
  117. <a-input-number
  118. id="settlementSet-creditWarnLimit"
  119. v-model="form.creditWarnLimit"
  120. :precision="2"
  121. :min="0.01"
  122. :max="form.creditLimit-0.1"
  123. placeholder="请输入正数(最多允许两位小数)"
  124. style="width: 100%;display: inline-block;" />
  125. </a-form-model-item>
  126. </a-col>
  127. <a-col :span="1"> <span style="display: inline-block; padding: 10px;">元</span></a-col>
  128. </a-row>
  129. <a-col :span="15">
  130. <a-form-model-item label="结算提醒" prop="warnBeforeDays" v-if="form.settleType=='MONTH'">
  131. <div style="display: flex;padding: 0;align-items: center;">
  132. <span style="display: inline-block;margin-right: 10px;">提前</span>
  133. <a-select
  134. style="background-color: none;width: 65%;"
  135. placeholder="请选择结算提醒日期"
  136. id="settlementSet-warnBeforeDays"
  137. allowClear
  138. v-model="form.warnBeforeDays"
  139. >
  140. <a-select-option v-for="item in dateTXList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
  141. </a-select>
  142. <span style="display: inline-block;margin-left: 10px;">天开始提醒</span>
  143. </div>
  144. </a-form-model-item>
  145. </a-col>
  146. <a-col :span="15" v-if="form.settleType">
  147. <a-form-model-item :label="form.settleType=='CREDIT'?'超过授信额度':'超期未结算'">
  148. <a-checkbox @change="onChange" id="settlementSet-settleType" :checked="form.limitFlag==1">
  149. 限制汽车修理厂无法使用数字货架
  150. </a-checkbox>
  151. </a-form-model-item>
  152. </a-col>
  153. <a-col :span="15" v-if="pageInfo&&!pageInfo.settleType &&form.settleType ">
  154. <a-form-model-item label="是否需要缴纳保证金" prop="bondFlag" >
  155. <a-radio-group name="radioGroup" v-model="form.bondFlag" @change="changeRadio" id="settlementSet-bondFlag">
  156. <a-radio :value="1">是</a-radio>
  157. <a-radio :value="0">否</a-radio>
  158. </a-radio-group>
  159. </a-form-model-item>
  160. </a-col>
  161. <a-row v-if="form.settleType&&form.bondFlag&&isEdit">
  162. <a-col :span="15">
  163. <a-form-model-item label="保证金缴纳金额" prop="bondAmount" >
  164. <a-input-number
  165. id="settlementSet-bondAmount"
  166. v-model="form.bondAmount"
  167. :precision="2"
  168. :min="0.01"
  169. :max="999999"
  170. placeholder="请输入正数(最多允许两位小数)"
  171. style="width: 100%;display: inline-block;" />
  172. </a-form-model-item>
  173. </a-col>
  174. <a-col :span="1"> <span style="display: inline-block; padding: 10px;">元</span></a-col>
  175. </a-row>
  176. </a-row>
  177. <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
  178. <a-button type="primary" @click="handleSubmit" id="settlementSet-handleSubmit">保存</a-button>
  179. </a-form-model-item>
  180. </a-form-model>
  181. </div>
  182. </a-card>
  183. <!-- 修改结算方式弹窗 -->
  184. <settlementModifyModal :visible="openModal" :settleInfo="settleInfo" :shelfInfo="pageInfo" @close="close"></settlementModifyModal>
  185. </a-spin>
  186. </div>
  187. </template>
  188. <script>
  189. import { STable, VSelect } from '@/components'
  190. import { shelfDetail, shelfSettleRuleSave, settleRuleDetail } from '@/api/shelf.js'
  191. import { bondRecordList } from '@/api/boundRecord.js'
  192. import settlementModifyModal from './settlementModifyModal.vue'
  193. import { toThousands } from '@/libs/tools.js'
  194. export default {
  195. components: { STable, settlementModifyModal, VSelect },
  196. data () {
  197. return {
  198. spinning: false,
  199. isEdit: false, // 货位号是否为编辑
  200. openModal: false, // 货位模板弹窗初始状态
  201. formItemLayout: {
  202. labelCol: { span: 13 },
  203. wrapperCol: { span: 11 }
  204. },
  205. settleInfo: null, // 结算详情
  206. // shelfInfo: null, // 数字货架详情
  207. settlementType: '', // 结算方式
  208. pageInfo: null,
  209. form: {
  210. settleType: undefined, // 结算方式
  211. creditLimit: '', // 授信额度
  212. creditWarnLimit: '', // 结算提醒金额
  213. settleDay: undefined, // 每月结算日
  214. warnBeforeDays: undefined, // 结算提醒提前天数
  215. limitFlag: '', // 是否限制使用
  216. bondFlag: '', // 是否缴纳保证金
  217. bondAmount: '' // 保证金金额
  218. },
  219. dateList: [{ id: 1, name: 1 }, { id: 2, name: 2 }, { id: 3, name: 3 }, { id: 4, name: 4 }, { id: 5, name: 5 }, { id: 6, name: 6 }, { id: 7, name: 7 }, { id: 8, name: 8 }, { id: 9, name: 9 }, { id: 10, name: 10 }, { id: 11, name: 11 }, { id: 12, name: 12 }, { id: 13, name: 13 }, { id: 14, name: 14 }, { id: 15, name: 15 }, { id: 16, name: 16 }, { id: 17, name: 17 }, { id: 18, name: 18 }, { id: 19, name: 19 }, { id: 20, name: 20 }, { id: 21, name: 21 }, { id: 22, name: 22 }, { id: 23, name: 23 }, { id: 24, name: 24 }, { id: 25, name: 25 }],
  220. dateTXList: [{ id: 1, name: 1 }, { id: 2, name: 2 }, { id: 3, name: 3 }, { id: 4, name: 4 }, { id: 5, name: 5 }, { id: 6, name: 6 }, { id: 7, name: 7 }, { id: 8, name: 8 }, { id: 9, name: 9 }, { id: 10, name: 10 }],
  221. rules: {
  222. settleType: [ { required: true, message: '请选择结算方式', trigger: 'change' } ],
  223. creditLimit: [ { required: true, message: '请输入授信额度', trigger: 'blur' } ],
  224. creditWarnLimit: [{ required: true, message: '请输入结算提醒金额', trigger: 'blur' }],
  225. settleDay: [ { required: true, message: '请选择每月结算日期', trigger: 'change' } ],
  226. warnBeforeDays: [ { required: true, message: '请选择每月结算提醒提前的日期', trigger: 'change' } ],
  227. bondFlag: [ { required: true, message: '请选择是否缴纳保证金', trigger: 'change' }],
  228. bondAmount: [ { required: true, message: '请输入保证金金额', trigger: 'blur' }]
  229. },
  230. // 表头
  231. columns: [
  232. { title: '序号', dataIndex: 'no', width: '10%', align: 'center', customRender: function (text, record, index) { return index + 1 || '--' } },
  233. { title: '创建时间', dataIndex: 'createDate', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
  234. { title: '保证金金额', dataIndex: 'bondAmount', width: '30%', align: 'right', customRender: function (text) { return toThousands(text, 2) || '--' } },
  235. { title: '状态', dataIndex: 'stateDictValue', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
  236. { title: '支付时间', width: '20%', align: 'center', dataIndex: 'payDate' }
  237. ],
  238. // 加载数据方法 必须为 Promise 对象
  239. loadData: parameter => {
  240. this.spinning = true
  241. return bondRecordList(Object.assign({ shelfSn: this.$route.params.shelfSn })).then(res => {
  242. let data
  243. if (res.status == 200) {
  244. data = res.data
  245. const no = (data.pageNo - 1) * data.pageSize
  246. for (let i = 0; i < data.length; i++) {
  247. const _item = data[i]
  248. _item.no = no + i + 1
  249. }
  250. }
  251. this.spinning = false
  252. return data
  253. })
  254. }
  255. }
  256. },
  257. methods: {
  258. handleBack () {
  259. this.isEdit = false
  260. this.form = {}
  261. this.$refs.ruleForm.resetFields()
  262. this.$router.push({ path: '/numsGoodsShelves/goodsShelvesAdministration/list' })
  263. // this.$router.go(-1)
  264. },
  265. // 查看图片
  266. inited (viewer) {
  267. if (viewer) {
  268. const imageUrl = []
  269. viewer.map(item => {
  270. imageUrl.push(item.imageUrl)
  271. })
  272. this.$viewerApi({
  273. images: imageUrl
  274. })
  275. }
  276. },
  277. onChange (e) {
  278. console.log(e.target.checked)
  279. if (e.target.checked) {
  280. this.form.limitFlag = 1
  281. } else {
  282. this.form.limitFlag = 0
  283. }
  284. },
  285. //
  286. changeRadio (e) {
  287. this.isEdit = e.target.value
  288. },
  289. // 数字货架详情
  290. getShelfDetail () {
  291. this.spinning = true
  292. shelfDetail({
  293. shelfSn: this.$route.params.shelfSn
  294. }).then(res => {
  295. if (res.status == 200) {
  296. this.pageInfo = Object.assign({}, res.data)
  297. if (this.pageInfo.ownerType == 1 && this.pageInfo.images) {
  298. this.pageInfo.images = this.pageInfo.images.split(',')
  299. }
  300. this.settlementType = this.pageInfo.settleType
  301. console.log(this.form, 'this.form')
  302. this.$nextTick(() => {
  303. this.getSettleDetail()
  304. })
  305. } else {
  306. this.pageInfo = null
  307. }
  308. this.spinning = false
  309. })
  310. },
  311. // 结算详情
  312. getSettleDetail () {
  313. if (this.settlementType) {
  314. console.log(this.settlementType, 'this.settlementType')
  315. settleRuleDetail({ shelfSn: this.pageInfo.shelfSn, settleType: this.settlementType }).then(res => {
  316. if (res.status == 200) {
  317. this.form = Object.assign({}, res.data)
  318. this.form.limitFlag = Number(this.form.limitFlag)
  319. this.settleInfo = res.data
  320. } else {
  321. this.form = {}
  322. }
  323. })
  324. }
  325. },
  326. close (type) {
  327. console.log(type, 'type')
  328. this.settlementType = type
  329. this.openModal = false
  330. this.getSettleDetail()
  331. console.log(this.settlementType, 'this.settlementType')
  332. },
  333. handleEdit (row) {
  334. this.isEdit = true
  335. },
  336. // 修改
  337. handleModify (shelfVal, settleVal) {
  338. console.log(shelfVal, settleVal, '----------修改')
  339. this.pageInfo = shelfVal
  340. this.settleInfo = settleVal
  341. this.openModal = true
  342. console.log('----------修改')
  343. },
  344. // 保存
  345. handleSubmit () {
  346. const _this = this
  347. this.$refs.ruleForm.validate(valid => {
  348. if (valid) {
  349. const params = Object.assign({}, _this.form)
  350. console.log(params, 'params')
  351. if (params.limitFlag == '') {
  352. params.limitFlag = 0
  353. }
  354. if (this.pageInfo) {
  355. params.shelfSn = this.pageInfo.shelfSn
  356. params.storeSn = this.pageInfo.storeSn
  357. params.dealerSn = this.pageInfo.dealerSn
  358. }
  359. _this.spinning = true
  360. shelfSettleRuleSave(params).then(res => {
  361. if (res.status == 200) {
  362. _this.$message.success(res.message)
  363. setTimeout(function () {
  364. _this.isshow = false
  365. _this.spinning = false
  366. _this.handleBack()
  367. }, 300)
  368. } else {
  369. _this.spinning = false
  370. }
  371. })
  372. } else {
  373. console.log('error submit!!')
  374. return false
  375. }
  376. })
  377. },
  378. pageInit () {
  379. this.getShelfDetail()
  380. }
  381. },
  382. mounted () {
  383. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  384. this.pageInit()
  385. }
  386. },
  387. activated () {
  388. // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
  389. if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
  390. this.pageInit()
  391. }
  392. },
  393. beforeRouteEnter (to, from, next) {
  394. next(vm => {
  395. })
  396. }
  397. }
  398. </script>
  399. <style lang="less">
  400. .settlementSet-page{
  401. position: relative;
  402. height: 100%;
  403. padding-bottom: 51px;
  404. box-sizing: border-box;
  405. .settlementSet-baseInfo{
  406. margin-bottom: 10px;
  407. .ant-input-number-handler-wrap{
  408. display: none;
  409. }
  410. }
  411. .bzj-collapse{
  412. margin-top: 10px;
  413. .ant-collapse-content-box{
  414. padding: 10px !important;
  415. }
  416. }
  417. }
  418. </style>