addSpotCheck.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. <template>
  2. <view class="pageInfo">
  3. <view>
  4. <u-form :model="form" ref="uForm">
  5. <u-form-item label="任务名称" label-width="160rpx" prop="name"><u-input v-model="form.name" maxlength="30" /></u-form-item>
  6. <u-form-item label="任务周期" v-model="form.cycleType" label-width="160rpx" prop="cycleType">
  7. <v-select ref="cycleType" code="TASK_CONFIG_CYCLE_TYPE" placeholder="请选择任务周期" v-model="form.cycleType"></v-select>
  8. </u-form-item>
  9. <u-form-item label="执行日期" v-if="form.cycleType=='DAY'" label-width="160rpx" prop="buildDateDay">
  10. <u-input v-model="form.buildDateDay" @click="showBuildDateDay=true" placeholder="请选择执行时间" type="select"/>
  11. <u-picker v-model="showBuildDateDay" @confirm="confirmBuildDateDay" mode="time" :default-time="form.buildDateDay"></u-picker>
  12. </u-form-item>
  13. <u-form-item label="执行日期" v-if="form.cycleType=='WEEK'" label-width="160rpx" prop="buildDateWeek">
  14. <v-select ref="cycleType" code="WEEK" placeholder="请选择周几" v-model="form.buildDateWeek"></v-select>
  15. </u-form-item>
  16. <u-form-item label="执行时间" label-width="160rpx" prop="zxTime">
  17. <view @click="onShowPickerTime('time')" style="color: rgb(192,196,204);">{{ time ? time : '请选择执行时间' }}</view>
  18. <mx-date-picker
  19. class="beginTime"
  20. :show="showPickerTime"
  21. type="time"
  22. :value="form.zxTime"
  23. :show-tips="true"
  24. @confirm="onSelectedTime"
  25. @cancel="onSelectedTime"
  26. />
  27. </u-form-item>
  28. <u-form-item label="开始日期" label-width="160rpx" prop="startDate">
  29. <view @click="onShowPickerBegin('date')" style="color: rgb(192,196,204);">{{ form.startDate ? form.startDate : '请选择开始日期' }}</view>
  30. <mx-date-picker
  31. class="beginTime"
  32. :show="showPickerBegin"
  33. :type="type"
  34. :value="form.startDate"
  35. :show-tips="true"
  36. @confirm="onSelectedBegin"
  37. @cancel="onSelectedBegin"
  38. />
  39. </u-form-item>
  40. <u-form-item label="结束日期" label-width="160rpx" prop="endDate">
  41. <view @click="onShowPickerEnd('date')" style="color: rgb(192,196,204);">{{ form.endDate ? form.endDate : '请选择结束日期' }}</view>
  42. <mx-date-picker class="beginTime" :show="showPickerEnd" :type="type" :value="form.endDate" :show-tips="true" @confirm="onSelectedEnd" @cancel="onSelectedEnd" />
  43. </u-form-item>
  44. <u-form-item label="执行类型" label-width="160rpx" prop="zxType">
  45. <v-select ref="contentCls" v-model="form.zxType" code="BUSINESS_EXPERIRENCE_CONTENT_CLS" placeholder="请选择执行类型"></v-select>
  46. </u-form-item>
  47. <u-form-item label="考评指标" label-width="160rpx" prop="assessList">
  48. <view style="color:rgb(192,196,204); width: 100%;" @click="openZBpage">{{ form.assessList ? form.assessList.length + '项指标' : '请选择考评指标' }}</view>
  49. <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888" @click="openZBpage"></u-icon>
  50. </u-form-item>
  51. <u-form-item label="考评门店" label-width="160rpx" prop="storeList">
  52. <view style="color:rgb(192,196,204); width: 100%;" @click="openMDpage">{{ form.storeList ? form.storeList.length + '个门店' : '请选择考评门店' }}</view>
  53. <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="28" color="#888888" @click="openMDpage"></u-icon>
  54. </u-form-item>
  55. <u-form-item label="任务有效天数" label-width="180rpx" prop="effectiveDay"><u-input v-model="form.effectiveDay" placeholder="请输入任务有效天数" /></u-form-item>
  56. <!-- <u-form-item label="执行时间" label-width="160rpx" prop="zxTime">
  57. <view @click="onShowPickerTime('time')" style="color: rgb(192,196,204);">{{time ? time : '请选择执行时间'}}</view>
  58. <mx-date-picker class="beginTime" :show="showPickerTime" type="time" :value="form.zxTime" :show-tips="true" @confirm="onSelectedTime" @cancel="onSelectedTime"/>
  59. </u-form-item> -->
  60. </u-form>
  61. <view class="btns">
  62. <u-button class="confirmBtn" type="primary" size="medium" @click="submit">提交</u-button>
  63. <u-button class="cancelBtn" size="medium" @click="cancel">取消</u-button>
  64. </view>
  65. </view>
  66. </view>
  67. </template>
  68. <script>
  69. import vSelect from '@/components/select/v-select.vue';
  70. import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
  71. import { clzConfirm } from '@/libs/tools.js';
  72. export default {
  73. components: {
  74. vSelect,
  75. MxDatePicker
  76. },
  77. data() {
  78. // const currentDate = this.getDate({
  79. // format: true
  80. // })
  81. return {
  82. showBuildDateDay: false, // 执行日期
  83. showPickerBegin: false, // 默认是否显示开始日期的日期组件
  84. showPickerEnd: false, // 默认是否显示结束日期的日期组件
  85. showPickerTime: false, // 默认是否显示时间的时间组件
  86. date: '',
  87. time: '',
  88. type: 'date',
  89. form: {
  90. name: '', // 任务名称
  91. cycleType: '', // 周期类型
  92. buildTime: '', // 执行日期
  93. zxTime: '', // 执行时间
  94. zxType: '', // 执行类型
  95. startDate: '', // 开始日期
  96. endDate: '', // 结束日期
  97. assessList: '', // 考评指标
  98. storeList: '', // 考评门店
  99. effectiveDay: '' // 任务有效天数
  100. },
  101. rules: {
  102. name: [{ required: true, message: '请输入名称30个字以内', trigger: 'blur' }],
  103. cycleType: [{ required: true, message: '请选择任务周期', trigger: 'blur' }],
  104. buildTime: [{ required: true, message: '请选择执行日期', trigger: 'blur' }],
  105. zxTime: [{ required: true, message: '请选择执行时间', trigger: 'blur' }],
  106. zxType: [{ required: true, message: '请选择执行类型', trigger: 'blur' }],
  107. startDate: [{ required: true, message: '请选择开始日期', trigger: 'blur' }],
  108. endDate: [{ required: true, message: '请选择结束日期', trigger: 'blur' }],
  109. assessList: [{ required: true, message: '请选择考评指标', trigger: 'blur' }],
  110. storeList: [{ required: true, message: '请选择考评门店', trigger: 'blur' }],
  111. effectiveDay: [{ required: true, message: '请输入任务有效天数', trigger: 'blur' }]
  112. }
  113. };
  114. },
  115. onReady() {
  116. this.$refs.uForm.setRules(this.rules);
  117. // 检测选择的考评指标
  118. uni.$on('selKpItem', (data) => {
  119. this.form.assessList = data;
  120. });
  121. // 监听选择的考评门店
  122. uni.$on('selKpStores',(data) => {
  123. console.log(data)
  124. this.form.storeList = data;
  125. })
  126. },
  127. onUnload() {
  128. uni.$off('selKpItem')
  129. uni.$off('selKpStores')
  130. },
  131. methods: {
  132. confirmBuildDateDay(val){
  133. this.form.buildDateDay = val.year +"-"+ val.month +"-"+ val.day
  134. },
  135. // 显示开始日期选择
  136. onShowPickerBegin(type) {
  137. this.type = type;
  138. this.showPickerBegin = true;
  139. this.form.startDate = this[type];
  140. },
  141. // 日期选择
  142. onSelectedBegin(e) {
  143. console.log(e);
  144. this.showPickerBegin = false;
  145. if (e) {
  146. this[this.type] = e.value;
  147. // this[this.form.startDate] = e.value
  148. console.log(this[this.form.startDate], '------------日期', this[this.type]);
  149. }
  150. },
  151. // 显示结束日期选择
  152. onShowPickerEnd(type) {
  153. this.type = type;
  154. this.showPickerEnd = true;
  155. this.form.endDate = this[type];
  156. },
  157. // 日期选择
  158. onSelectedEnd(e) {
  159. this.showPickerEnd = false;
  160. if (e) {
  161. this[this.type] = e.value;
  162. console.log('------------日期', this[this.type]);
  163. }
  164. },
  165. // 执行时间选择
  166. onShowPickerTime(type) {
  167. this.type = type;
  168. this.showPickerTime = true;
  169. this.form.zxTime = this[type];
  170. },
  171. // 日期选择
  172. onSelectedTime(e) {
  173. this.showPickerTime = false;
  174. if (e) {
  175. this[this.type] = e.value;
  176. }
  177. },
  178. // 确认
  179. markConfirm(arr) {
  180. this.markArr = arr;
  181. let arrId = [];
  182. arr.map(item => {
  183. arrId.push({ id: item.id });
  184. });
  185. this.formData.labels = arrId;
  186. this.isPartMark = false;
  187. },
  188. // 取消 配件标签
  189. markCancel() {
  190. this.isPartMark = false;
  191. },
  192. openZBpage() {
  193. uni.navigateTo({
  194. url: '/pages/spotCheckConfigure/evaluateItem?item='+encodeURIComponent(JSON.stringify(this.form.assessList))
  195. });
  196. },
  197. openMDpage() {
  198. uni.navigateTo({
  199. url: '/pages/spotCheckConfigure/evaluateStore?item='+encodeURIComponent(JSON.stringify(this.form.storeList))
  200. });
  201. },
  202. // 提交
  203. submit() {
  204. console.log(this.form);
  205. this.$refs.uForm.validate(valid => {
  206. if (valid) {
  207. console.log('验证通过');
  208. } else {
  209. console.log('验证失败');
  210. }
  211. });
  212. },
  213. // 取消
  214. cancel() {
  215. this.$refs.uForm.resetFields(this.rules);
  216. }
  217. }
  218. };
  219. </script>
  220. <style lang="scss">
  221. page {
  222. height: 100%;
  223. }
  224. .pageInfo {
  225. padding: 0 40upx;
  226. .form-input-placeholder {
  227. font-size: 28upx;
  228. color: rgb(192, 196, 204);
  229. }
  230. // .beginTime{
  231. // z-index:999;
  232. // }
  233. .beginTime {
  234. z-index: 999999 !important;
  235. }
  236. .btns {
  237. text-align: center;
  238. padding: 50upx 0;
  239. .confirmBtn {
  240. margin-right: 20upx;
  241. }
  242. .cancelBtn {
  243. margin-left: 20upx;
  244. }
  245. }
  246. }
  247. </style>