addBacklog.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. <template>
  2. <view class="back-body">
  3. <view class="back-content">
  4. <view class="wrap">
  5. <u-upload :custom-btn="true" :multiple="false" ref="uUpload" :action="action">
  6. <view v-if="lists.length<5" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
  7. <u-icon name="plus" size="60" color="#c0c4cc"></u-icon>
  8. <view>选择图片</view>
  9. </view>
  10. </u-upload>
  11. </view>
  12. <u-form class="form-content" :model="form" ref="uForm" label-width="180">
  13. <u-form-item required label="门店" prop="storeName">
  14. <u-input @click="chooseStore" input-align="right" v-model="form.storeName" disabled placeholder="请选择门店" />
  15. <u-icon @click="chooseStore" name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  16. </u-form-item>
  17. <u-form-item label="考评指标" prop="clsName">
  18. <u-input @click="chooseClsName" input-align="right" v-model="form.clsName" disabled placeholder="请选择考评指标" />
  19. <u-icon @click="chooseClsName" name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  20. </u-form-item>
  21. <u-form-item label="抄送人" prop="receiveUser">
  22. <u-input @click="chooseUser" input-align="right" v-model="form.receiveUser" disabled placeholder="请选择抄送人" />
  23. <u-icon @click="chooseUser" name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  24. </u-form-item>
  25. <u-form-item required label="整改到期日" prop="effectiveEndTime" >
  26. <u-input @click="showPicker=true" input-align="right" v-model="form.effectiveEndTime" disabled placeholder="请选择整改到期日" />
  27. <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  28. </u-form-item>
  29. </u-form>
  30. <view class="remarks">
  31. <u-input v-model="remarks" maxlength="500" type="textarea" placeholder="请输入备注(最多500字符)..." />
  32. </view>
  33. </view>
  34. <u-button @click="handleSave" :loading="loading" class="save-btn" type="primary">保存</u-button>
  35. <!-- 时间选择器 -->
  36. <w-picker
  37. class="date-picker"
  38. :visible.sync="showPicker"
  39. mode="date"
  40. :current="true"
  41. fields="day"
  42. :value="form.effectiveEndTime"
  43. @confirm="onSelected($event,'date')"
  44. @cancel="showPicker=false"
  45. ref="date"
  46. ></w-picker>
  47. </view>
  48. </template>
  49. <script>
  50. import {saveBackLog} from '@/api/backLog.js'
  51. export default {
  52. components: {
  53. },
  54. data() {
  55. return {
  56. action: getApp().globalData.baseUrl + 'upload', //自行修改各自的对应的接口, // 图片上传后端地址
  57. showUploadList: false,
  58. // 如果将某个ref的组件实例赋值给data中的变量,在小程序中会因为循环引用而报错
  59. // 这里直接获取内部的lists变量即可
  60. lists: [],
  61. showPicker: false, // 是否显示时间弹窗
  62. form: {
  63. storeName: '', // 门店
  64. storeId: '', // 门店id
  65. clsName: '',// 考评指标
  66. receiveUser: '', // 抄送人
  67. effectiveEndTime: '' // 整改到期日
  68. },
  69. storeSelected : [], // 已选门店
  70. userSelected : [], // 已选用户
  71. evaItemSelected : null, // 已选指标
  72. remarks: '', // 备注
  73. loading: false // 保存按钮loading
  74. }
  75. },
  76. // 只有onReady生命周期才能调用refs操作组件
  77. onReady() {
  78. // 得到整个组件对象,内部图片列表变量为"lists"
  79. this.lists = this.$refs.uUpload.lists;
  80. },
  81. onLoad(option) {
  82. uni.$on('selKpStores',this.setStore)
  83. uni.$on('selKpUsers',this.setUser)
  84. uni.$on('selKpItem',this.setEvaItem)
  85. },
  86. onUnload() {
  87. uni.$off('selKpStores', this.setStore)
  88. uni.$off('selKpUsers', this.setUser)
  89. uni.$off('selKpItem', this.setEvaItem)
  90. },
  91. methods: {
  92. // 获取选择门店
  93. setStore (data) {
  94. this.storeSelected = data
  95. this.form.storeName = this.storeSelected[0].name
  96. this.form.storeId = this.storeSelected[0].id
  97. },
  98. // 确认日期选择
  99. onSelected (v) {
  100. let nowTime = new Date().getTime() // 当前时间戳
  101. let nowDate = this.$u.date(nowTime,'yyyy-mm-dd') // 当前日期
  102. if (nowTime > new Date(v.value).getTime() && nowDate!=v.value) {
  103. return this.toashMsg('所选日期小于当前日期,请重新选择!')
  104. }
  105. this.form.effectiveEndTime = v.value
  106. this.showPicker = false
  107. },
  108. // 选择门店
  109. chooseStore () {
  110. uni.navigateTo({
  111. url: `/pages/spotCheckConfigure/evaluateStore?type=${'radio'}&item=${encodeURIComponent(JSON.stringify(this.storeSelected))}`
  112. })
  113. },
  114. // 选择考评指标
  115. chooseClsName () {
  116. uni.navigateTo({
  117. url: '/pages/toDoList/chooseEvaluateItem?item='+encodeURIComponent(JSON.stringify(this.evaItemSelected))
  118. })
  119. },
  120. // 获取选择的指标
  121. setEvaItem (data) {
  122. console.log(data,'eeeeeeee')
  123. this.evaItemSelected = data
  124. this.form.clsName = data.name
  125. console.log(data.name,this.form.clsName,'222222')
  126. },
  127. // 选择抄送人
  128. chooseUser () {
  129. uni.navigateTo({
  130. url: `/pages/toDoList/chooseReceiveUser?type=${'checkbox'}&item=${encodeURIComponent(JSON.stringify(this.userSelected))}`
  131. })
  132. },
  133. // 获取选择的抄送人
  134. setUser (data) {
  135. // console.log(data,'eeeeeeee')
  136. this.userSelected = data
  137. let name = ''
  138. if (data.length) {
  139. data.map((item,index) =>{
  140. name = (name?(name + ',') : '') + item.name
  141. })
  142. }
  143. this.form.receiveUser = name
  144. },
  145. // 保存提交
  146. handleSave () {
  147. this.$refs.uForm.validate(valid => {
  148. if (valid) {
  149. if (!this.form.storeName) {
  150. return this.toashMsg('请选择门店!')
  151. } else if (!this.form.effectiveEndTime) {
  152. return this.toashMsg('请选择整改到期日!')
  153. }
  154. const copyUserList = []
  155. this.userSelected.map(item =>{
  156. let p = {
  157. userId: item.id,
  158. userName: item.name
  159. }
  160. copyUserList.push(p)
  161. })
  162. const backlogPhotoList = []
  163. this.lists.map(item =>{
  164. let photo = {
  165. photoPath:item.response&&item.response.data?item.response.data:''
  166. }
  167. backlogPhotoList.push(photo)
  168. })
  169. let params = {
  170. "copyUserList": copyUserList,
  171. "backlogPhotoList": backlogPhotoList,
  172. "clsNo": this.evaItemSelected ? this.evaItemSelected.assessItemId : '',
  173. "clsName": this.evaItemSelected ? this.evaItemSelected.name : '',
  174. "problemDesc": this.remarks,
  175. "effectiveEndTime": this.form.effectiveEndTime,
  176. "storeId" : this.form.storeId
  177. }
  178. // console.log(params,'ppppppppp')
  179. this.loading = true
  180. uni.showLoading({
  181. title: '保存中,请稍后...',
  182. mask: true
  183. })
  184. saveBackLog(params).then(res=>{
  185. this.toashMsg(res.message)
  186. if(res.status == 200) {
  187. uni.$emit('refreshBL',{msg:'页面更新'})
  188. uni.navigateBack()
  189. }
  190. this.loading = false
  191. uni.hideLoading()
  192. })
  193. } else {
  194. console.log('验证失败');
  195. }
  196. })
  197. }
  198. }
  199. }
  200. </script>
  201. <style lang="scss" scoped>
  202. .back-body {
  203. height: 100%;
  204. background-color: #eee;
  205. display: flex;
  206. flex-direction: column;
  207. .back-content {
  208. flex: 1;
  209. overflow-y: scroll;
  210. }
  211. .wrap {
  212. padding: 24upx;
  213. background-color: #fff;
  214. width: 100%;
  215. }
  216. .slot-btn {
  217. width: 200upx;
  218. height: 200upx;
  219. display: flex;
  220. flex-direction: column;
  221. justify-content: center;
  222. align-items: center;
  223. background: rgb(244, 245, 246);
  224. border-radius: 10upx;
  225. color: #999;
  226. view {
  227. margin-top: 10upx;
  228. }
  229. }
  230. .slot-btn__hover {
  231. background-color: rgb(235, 236, 238);
  232. }
  233. .paizhao {
  234. background-color: #fff;
  235. height: 340upx;
  236. display: flex;
  237. align-items: center;
  238. justify-content: center;
  239. .icon{
  240. width: 160upx;
  241. height: 160upx;
  242. border: 1px solid #eee;
  243. display: flex;
  244. align-items: center;
  245. justify-content: center;
  246. }
  247. }
  248. .text-right {
  249. text-align: right;
  250. }
  251. .top-ad-swiper{
  252. background-color: #fff;
  253. height: 340upx;
  254. }
  255. .swiper-item-imgse{
  256. width: 750upx;
  257. height: 340upx;
  258. }
  259. .form-content{
  260. background-color: #fff;
  261. padding: 0 30upx;
  262. }
  263. .remarks{
  264. background-color: #fff;
  265. padding: 0 30upx;
  266. margin-top: 20upx;
  267. }
  268. .save-btn{
  269. width: 90%;
  270. margin-bottom: 20upx;
  271. }
  272. }
  273. </style>