xianzhiziyuan-add.vue 10.0 KB

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