xianzhiziyuan-edit.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
  1. <template>
  2. <div class="xianzhiziyuan-add">
  3. <div class="form">
  4. <div class="form-item" style="display: flex;padding: 20px 0px;">
  5. <div class="form-label width30">
  6. <span class=" required ws">*</span>资源名称:
  7. </div>
  8. <input placeholder="请输入" type="text" v-model="form.name">
  9. </div>
  10. <div class="form-item" style="display: flex;padding: 20px 0px;" @click="goodsType('goodsType')">
  11. <div class="form-label width30">
  12. <span class=" required ws">*</span>资源类别:
  13. </div>
  14. <div>
  15. <span v-if="goodsTypeArray.length==0">请选择</span>
  16. <span v-else v-for="item in goodsTypeArray">
  17. {{ item.value + ',' }}
  18. </span>
  19. </div>
  20. </div>
  21. <div class="form-item" style="display: flex;padding: 20px 0px;" @click="openParkSelect('useTypeText')">
  22. <div class="form-label width30">
  23. 使用方式:
  24. </div>
  25. <div>{{ form.useTypeText ? form.useTypeText : '请选择' }}</div>
  26. </div>
  27. <div class="form-item" style="display: flex;padding: 20px 0px;">
  28. <div class="form-label width30">
  29. <span class=" required">*</span>参考金额(元):
  30. </div>
  31. <input placeholder="请输入" type="text" v-model="form.initUseMoney">
  32. </div>
  33. <div class="form-item" style="display: flex;padding: 20px 0px;">
  34. <div class="form-label width30">
  35. <span class=" required">*</span>联系人:
  36. </div>
  37. <input placeholder="请输入" type="text" v-model="form.connectName">
  38. </div>
  39. <div class="form-item" style="display: flex;padding: 20px 0px;">
  40. <div class="form-label width30">
  41. <span class=" required">*</span>联系电话:
  42. </div>
  43. <input placeholder="请输入" type="text" v-model="form.connectPhone">
  44. </div>
  45. <div class="form-item" style="padding: 20px 0px;">
  46. <div class="form-label width30">
  47. <span class=" required">*</span>招租图片:
  48. </div>
  49. <van-uploader
  50. :multiple="true"
  51. v-model="componentsFileUrlList"
  52. :max-count="6"
  53. :after-read="afterRead"
  54. :before-delete="beforeDelete"
  55. ></van-uploader>
  56. </div>
  57. <div class="form-item">
  58. <div class="form-label" style="padding: 5px 0px;">
  59. <span class=" required">*</span>闲置资源描述:
  60. </div>
  61. <div style="margin-top: 8px;">
  62. <van-field
  63. v-model="form.info"
  64. autosize
  65. maxlength="50"
  66. placeholder="请输入留言"
  67. rows="2"
  68. show-word-limit
  69. type="textarea"
  70. />
  71. </div>
  72. </div>
  73. </div>
  74. <div class="btn-view">
  75. <button class="btn btn1" @click="goBack()">关闭</button>
  76. <button class="btn btn2" @click="submitData(0)">提交</button>
  77. </div>
  78. <zhaozu-select
  79. ref="zhaozuSelect"
  80. :columns="dc_data.sunan_renting_type"
  81. @getZhaozuType="getZhaozuType"
  82. />
  83. <current-select
  84. :columns="userType"
  85. ref="userType"
  86. @getAboultPark="getAboultPark"
  87. />
  88. </div>
  89. </template>
  90. <script>
  91. import { Field, Form, Toast } from 'vant'
  92. import currentSelect from '@/pages/resource-release/componets/current-select.vue'
  93. import zhaozuSelect from '@/pages/resource-release/componets/zhaozuSelect.vue'
  94. import axios from 'axios'
  95. import Base from '@/pages/base/base.vue'
  96. import { edit, detail, getTmpInfoByUserId } from '@/service/api_goodsReport'
  97. import auth from '@/service/auth'
  98. export default {
  99. name: 'xianzhiziyuan-add',
  100. components: {
  101. Form, Field, currentSelect, zhaozuSelect
  102. },
  103. mixins: [Base],
  104. data() {
  105. return {
  106. myFileList: [],
  107. sunan_renting_type: [],
  108. dc_data: {},
  109. userType: [
  110. { text: '租赁', value: 1 },
  111. { text: '购买', value: 2 }
  112. ],
  113. dc_key: ['sunan_renting_type'],
  114. pattern: /\d{6}/,
  115. active: '',
  116. form: {},
  117. fileList: [],
  118. id: '',
  119. goodsTypeArray: [],
  120. componentsFileUrlList: []
  121. }
  122. },
  123. mounted() {
  124. this.id = this.$route.query.id
  125. this.initDict(this.dc_key).then((res) => {
  126. console.log(this.dc_data)
  127. this.detail()
  128. this.sunan_renting_type = this.dc_data.sunan_renting_type.map((e) => {
  129. return {
  130. text: e.label,
  131. value: e.value
  132. }
  133. })
  134. this.$forceUpdate()
  135. })
  136. },
  137. methods: {
  138. goBack() {
  139. this.$router.go(-1)
  140. },
  141. detail() {
  142. detail({ id: this.id }).then((res) => {
  143. this.id = res.id
  144. this.form.name = res.name
  145. let goodsTypeArray = res.types.split()
  146. this.goodsTypeArray = goodsTypeArray.map((e) => {
  147. return {
  148. label: e,
  149. value: e
  150. }
  151. })
  152. this.form.info = res.info
  153. let myFileList = res.pictureUrl.split(',')
  154. this.myFileList = myFileList
  155. this.componentsFileUrlList = myFileList.map((e) => {
  156. return {
  157. url: process.env.VUE_APP_API_URL + '/FileController/download/' + e,
  158. isImage: true
  159. }
  160. })
  161. this.form.connectPhone = res.connectPhone
  162. this.form.connectName = res.connectName
  163. this.form.initUseMoney = res.initUseMoney
  164. this.form.useTypeText = res.useType == 1 ? '租赁' : '购买'
  165. })
  166. },
  167. async submitData(status) {
  168. if (!this.form.name || this.form.name.length == 0) return Toast('请填写资源名称')
  169. if (!this.goodsTypeArray || this.goodsTypeArray.length == 0) return Toast('请选择资源类别')
  170. if (!this.form.useTypeText || this.form.useTypeText.length == 0) return Toast('请选择使用方式')
  171. if (!this.form.initUseMoney || this.form.initUseMoney.length == 0) return Toast('请填写参考金额')
  172. if (!this.form.connectName || this.form.connectName.length == 0) return Toast('请填写联系人')
  173. if (!this.form.connectPhone || this.form.connectPhone.length == 0) return Toast('请填写联系电话')
  174. if (!this.form.connectPhone || this.form.connectPhone.length == 0) {
  175. if (!this.myFileList || this.myFileList.length == 0) return Toast('请上传招租图片')
  176. }
  177. console.log(this.goodsTypeArray)
  178. let goodsTypeArray = this.goodsTypeArray.map((e) => {
  179. return e.value
  180. })
  181. let params = {
  182. types: goodsTypeArray.toString(),
  183. useType: this.form.useTypeText == '租赁' ? 1 : 2,
  184. pictureUrl: this.myFileList.join(','),
  185. connectName: this.form.connectName,
  186. connectPhone: this.form.connectPhone,
  187. info: this.form.info,
  188. status: status,
  189. id: this.id,
  190. name: this.form.name,
  191. updatedBy: auth.currUser().id,
  192. initUseMoney: this.form.initUseMoney,
  193. createdBy: auth.currUser().id
  194. }
  195. let data = await edit(params)
  196. if (data.code == 200 && status == 0) {
  197. Toast('提交成功')
  198. this.$router.go(-1)
  199. } else {
  200. Toast('保存成功')
  201. }
  202. console.log(params)
  203. },
  204. getZhaozuType(e) {
  205. console.log(e)
  206. this.goodsTypeArray = e
  207. },
  208. goodsType(type) {
  209. this.$refs.zhaozuSelect.setVisible(true)
  210. },
  211. beforeDelete(file, detail) {
  212. // this.handleImagUrlList = []
  213. console.log(file, detail)
  214. const vm = this
  215. // name.index代表图片的索引
  216. vm.myFileList.splice(detail.index, 1)
  217. return (file, name) => {
  218. const fileIndex = name.index
  219. vm.myFileList[detail.index].splice(fileIndex, 1)
  220. }
  221. },
  222. uploadImg(file) {
  223. const _this = this
  224. const formParam = new FormData() // 创建form对象
  225. formParam.append('file', file.file)// 通过append向form对象添加数据
  226. console.log(formParam.get('file')) // FormData私有类对象,访问不到,可以通过get判断值是否传进去
  227. // upload(formParam).then((res) => {
  228. // console.log(res)
  229. // })
  230. const config = {
  231. headers: {
  232. 'Content-Type': 'multipart/form-data',
  233. 'MVVM-Key': String(new Date().getTime()),
  234. 'xx': 'anything'
  235. } // 这里是重点,需要和后台沟通好请求头,Content-Type不一定是这个值
  236. } // 添加请求头
  237. return new Promise((resolve, reject) => {
  238. axios.post('/industryParkApi/wx/fileController/upload', formParam, config)
  239. .then(response => {
  240. let files = response.data.data.substring(1, response.data.data.length)
  241. files = files.substring(0, files.length - 1)
  242. console.log(_this.$common.castEval(files))
  243. _this.fileUrlList.push(_this.$common.castEval(files))
  244. }).catch((err, x) => {
  245. reject(err, x)
  246. })
  247. })
  248. },
  249. async afterRead(file) {
  250. let data = await this.$common.uploadImg(file)
  251. for (let i = 0; i < data.length; i++) {
  252. this.myFileList.push(data[i])
  253. }
  254. this.$forceUpdate()
  255. },
  256. getAboultPark(e, key) {
  257. console.log(e)
  258. this.form[key] = e.text
  259. this.$forceUpdate()
  260. },
  261. openParkSelect(type) {
  262. this.$refs.userType.setVisible(true, {}, type)
  263. },
  264. onFailed(errorInfo) {
  265. console.log('failed', errorInfo)
  266. }
  267. }
  268. }
  269. </script>
  270. <style lang="scss">
  271. .ws {
  272. white-space: nowrap;
  273. }
  274. .overhidden {
  275. white-space: nowrap;
  276. overflow: hidden;
  277. text-overflow: ellipsis;
  278. }
  279. .mt24 {
  280. margin-top: 24px;
  281. }
  282. .mb24 {
  283. margin-bottom: 24px;
  284. }
  285. .width30 {
  286. width: 30%;
  287. }
  288. .xianzhiziyuan-add {
  289. .form {
  290. width: 80vw;
  291. margin: 32px 5vw;
  292. padding: 5% 5vw;
  293. background: white;
  294. .form-label {
  295. //width: 20%;
  296. }
  297. .form-item {
  298. width: 100%;
  299. border-bottom: 2px solid #CCCCCC;
  300. padding-bottom: 20px;
  301. }
  302. .required {
  303. color: red
  304. }
  305. .van-field {
  306. background: #F7F7F7 !important;
  307. }
  308. }
  309. .btn-view {
  310. display: flex;
  311. justify-content: space-between;
  312. width: 90%;
  313. padding: 0 5%;
  314. height: 100px;
  315. position: fixed;
  316. bottom: 0;
  317. left: 0;
  318. .btn1 {
  319. background: rgba(87, 134, 218, 0.4);
  320. color: #13336B;
  321. }
  322. .btn2 {
  323. background: #1F3D74;
  324. color: #FFFFFF;
  325. }
  326. }
  327. .btn {
  328. width: 206px;
  329. height: 68px;
  330. background: #1d18bc;
  331. line-height: 68px;
  332. color: white;
  333. }
  334. }
  335. </style>