addBacklog.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <view class="back-body">
  3. <view class="back-content">
  4. <!-- 轮播图 -->
  5. <swiper v-if="backlogPhotoList.length" class="top-ad-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="600" :circular="true">
  6. <swiper-item v-for="(item,index) in backlogPhotoList" :key="index">
  7. <div class="swiper-item uni-bg-red">
  8. <u-image mode="scaleToFill" width="750upx" height="400upx" :src="item"></u-image>
  9. </div>
  10. </swiper-item>
  11. </swiper>
  12. <view v-else class="paizhao">
  13. <view class="icon" @click="takePhone">
  14. <u-icon name="xianchangpaishe" custom-prefix="xd-icon" size="64" color="#888888"></u-icon>
  15. </view>
  16. </view>
  17. <u-form class="form-content" :model="form" ref="uForm" label-width="180">
  18. <u-form-item label="门店" prop="storeName">
  19. <u-input @click="chooseStore" input-align="right" v-model="form.storeName" disabled placeholder="请选择门店" />
  20. <u-icon @click="chooseStore" name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  21. </u-form-item>
  22. <u-form-item label="考评指标" prop="clsName">
  23. <u-input @click="chooseClsName" input-align="right" v-model="form.clsName" disabled placeholder="请选择考评指标" />
  24. <u-icon @click="chooseClsName" name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  25. </u-form-item>
  26. <u-form-item label="抄送人" prop="receiveUser">
  27. <u-input @click="chooseUser" input-align="right" v-model="form.receiveUser" disabled placeholder="请选择抄送人" />
  28. <u-icon @click="chooseUser" name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  29. </u-form-item>
  30. <u-form-item label="整改到期日" prop="effectiveEndTime" >
  31. <u-input @click="showPicker=true" input-align="right" v-model="form.effectiveEndTime" disabled placeholder="请选择整改到期日" />
  32. <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="30" color="#888888"></u-icon>
  33. </u-form-item>
  34. </u-form>
  35. <view class="remarks">
  36. <u-input v-model="remarks" type="textarea" placeholder="请输入备注..." />
  37. </view>
  38. </view>
  39. <u-button class="save-btn" type="primary">保存</u-button>
  40. <!-- 时间选择器 -->
  41. <w-picker
  42. class="date-picker"
  43. :visible.sync="showPicker"
  44. mode="date"
  45. :current="true"
  46. fields="day"
  47. :value="form.effectiveEndTime"
  48. @confirm="onSelected($event,'date')"
  49. @cancel="showPicker=false"
  50. ref="date"
  51. ></w-picker>
  52. </view>
  53. </template>
  54. <script>
  55. export default {
  56. components: {
  57. },
  58. data() {
  59. return {
  60. // 顶部轮播图片
  61. backlogPhotoList:[],
  62. showPicker: false, // 是否显示时间弹窗
  63. form: {
  64. storeName: '', // 门店
  65. storeId: '', // 门店id
  66. clsName: '',// 考评指标
  67. receiveUser: '', // 抄送人
  68. effectiveEndTime: '' // 整改到期日
  69. },
  70. storeSelected : [], // 已选门店
  71. userSelected : [], // 已选用户
  72. remarks: '' // 备注
  73. }
  74. },
  75. onLoad(option) {
  76. uni.$on('selKpStores',this.setStore)
  77. uni.$on('selKpUsers',this.setUser)
  78. },
  79. onUnload() {
  80. uni.$off('selKpStores', this.setStore)
  81. uni.$off('selKpUsers', this.setUser)
  82. },
  83. methods: {
  84. // 获取选择门店
  85. setStore (data) {
  86. console.log(data,'eeeeeeee')
  87. this.storeSelected = data
  88. this.form.storeName = this.storeSelected[0].name
  89. this.form.storeId = this.storeSelected[0].id
  90. console.log(this.storeSelected,this.form.storeName,'2222222')
  91. },
  92. // 拍照 或从相册选相片
  93. takePhone () {
  94. let _this = this
  95. uni.chooseImage({
  96. count: 6, //默认9
  97. success: function (res) {
  98. console.log(JSON.stringify(res.tempFilePaths));
  99. _this.backlogPhotoList = res.tempFilePaths
  100. }
  101. })
  102. },
  103. // 确认日期选择
  104. onSelected (v) {
  105. console.log(v,'vvvvvvvv')
  106. this.form.effectiveEndTime = v.value
  107. this.showPicker = false
  108. },
  109. // 选择门店
  110. chooseStore () {
  111. uni.navigateTo({
  112. url: `/pages/spotCheckConfigure/evaluateStore?type=${'radio'}&item=${encodeURIComponent(JSON.stringify(this.storeSelected))}`
  113. })
  114. },
  115. // 选择考评指标
  116. chooseClsName () {
  117. uni.navigateTo({
  118. url: '/pages/spotCheckConfigure/evaluateItem'
  119. })
  120. },
  121. // 选择抄送人
  122. chooseUser () {
  123. uni.navigateTo({
  124. url: `/pages/toDoList/chooseReceiveUser?type=${'checkbox'}&item=${encodeURIComponent(JSON.stringify(this.userSelected))}`
  125. })
  126. },
  127. // 获取选择抄送人
  128. setUser (data) {
  129. // console.log(data,'eeeeeeee')
  130. this.userSelected = data
  131. let name = ''
  132. if (data.length) {
  133. data.map((item,index) =>{
  134. name = (name?(name + ',') : '') + item.name
  135. })
  136. }
  137. this.form.receiveUser = name
  138. },
  139. }
  140. }
  141. </script>
  142. <style lang="scss" scoped>
  143. .back-body {
  144. height: 100%;
  145. background-color: #eee;
  146. display: flex;
  147. flex-direction: column;
  148. .back-content {
  149. flex: 1;
  150. overflow-y: scroll;
  151. }
  152. .paizhao {
  153. background-color: #fff;
  154. height: 340upx;
  155. display: flex;
  156. align-items: center;
  157. justify-content: center;
  158. .icon{
  159. width: 160upx;
  160. height: 160upx;
  161. border: 1px solid #eee;
  162. display: flex;
  163. align-items: center;
  164. justify-content: center;
  165. }
  166. }
  167. .text-right {
  168. text-align: right;
  169. }
  170. .top-ad-swiper{
  171. background-color: #fff;
  172. height: 340upx;
  173. }
  174. .swiper-item-imgse{
  175. width: 750upx;
  176. height: 340upx;
  177. }
  178. .form-content{
  179. background-color: #fff;
  180. padding: 0 30upx;
  181. }
  182. .remarks{
  183. background-color: #fff;
  184. padding: 0 30upx;
  185. margin-top: 20upx;
  186. }
  187. .save-btn{
  188. width: 90%;
  189. margin-bottom: 20upx;
  190. }
  191. }
  192. </style>