com-attrs-setting.php 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734
  1. <style>
  2. .com-attrs-setting {
  3. width: 1300px;
  4. margin-top: 24px;
  5. margin-bottom: 10px;
  6. border: 1px solid #dddddd;
  7. border-radius: 6px;
  8. font-size: 13px;
  9. }
  10. .header-box {
  11. height: 40px;
  12. display: flex;
  13. background-color: #f5f6fa;
  14. border-bottom: 1px solid #dddddd;
  15. }
  16. .content-box {
  17. min-height: 360px;
  18. max-height: 600px;
  19. display: flex;
  20. }
  21. .left1-box {
  22. width: 150px;
  23. background-color: #f5f6fa;
  24. border-right: 1px solid #dddddd;
  25. }
  26. .left2-box {
  27. min-height: 360px;
  28. max-height: 600px;
  29. background-color: #f5f6fa;
  30. }
  31. .right1-box {
  32. width: calc(100% - 150px);
  33. padding: 0 20px;
  34. }
  35. .attrs-item {
  36. padding: 5px 4px;
  37. border-bottom: 1px solid #dddddd;
  38. text-align: center;
  39. cursor: pointer;
  40. }
  41. .attrs-item:last-child {
  42. border-bottom: none;
  43. }
  44. .scroll-box {
  45. overflow-y: scroll;
  46. }
  47. .flex-x {
  48. display: flex;
  49. justify-content: space-around;
  50. align-items: center;
  51. }
  52. .flex-l {
  53. display: flex;
  54. align-items: center;
  55. }
  56. .btn1 {
  57. margin-left: 8px;
  58. color: #409EFF;
  59. cursor: pointer;
  60. }
  61. .attr-select {
  62. background-color: #ffffff;
  63. }
  64. </style>
  65. <template id="com-attrs-setting">
  66. <div class="com-attrs-setting">
  67. <div class="header-box">
  68. <div class="left1-box flex-x">
  69. <span>选择规格</span>
  70. <span class="btn1" @click="dialogFormVisible = true" v-if="reserve_type == 0">批量设置</span>
  71. </div>
  72. <div class="right1-box flex-l bg">{{reserve_type == 0 ? '预约规则' : '规格规则'}}</div>
  73. </div>
  74. <div class="content-box">
  75. <div class="left1-box left2-box scroll-box">
  76. <div v-for="(item,index) in value" :key="index" @click="onAttr(index)" class="attrs-item" :class="item.isSelect ? 'attr-select' : ''">{{item.attr_list | formatAttr}}</div>
  77. </div>
  78. <div class="right1-box scroll-box">
  79. <el-form v-if="value && value[currentIndex]" :model="value[currentIndex]" ref="currentInfoReserve" size="mini"
  80. label-width="150px" class="demo-unifiedForm" style="padding: 10px 0">
  81. <template v-if="reserve_type == 0">
  82. <el-form-item label="可预约时间">
  83. <el-radio-group v-model="value[currentIndex].reserve_date_type" @input="onRadioChange">
  84. <el-radio :label="1">选择范围</el-radio>
  85. <el-radio :label="2">自选日期</el-radio>
  86. </el-radio-group>
  87. <div v-if="value[currentIndex].reserve_date_type == 1" class="range-box">
  88. <el-date-picker v-if="value[currentIndex].reserve_date_type == 1" v-model="value[currentIndex].checkRangeList" type="daterange"
  89. range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateSelectChange1"></el-date-picker>
  90. <div v-if="value[currentIndex].dayArr.length" class="range-check-box1">
  91. <el-checkbox-group v-model="value[currentIndex].checkWeekList" @change="weekSelectChange1">
  92. <el-checkbox v-for="(item,inx) in value[currentIndex].dayArr" :key="inx" :label="item.txt"></el-checkbox>
  93. </el-checkbox-group>
  94. </div>
  95. </div>
  96. <div v-if="value[currentIndex].reserve_date_type == 2" class="range-box">
  97. <el-date-picker v-if="value[currentIndex].reserve_date_type == 2" type="dates" v-model="value[currentIndex].reserve_date" value-format="yyyy-MM-dd" placeholder="选择一个或多个日期"></el-date-picker>
  98. </div>
  99. </el-form-item>
  100. <el-form-item label="预约模式">
  101. <el-radio-group v-model="value[currentIndex].reserve_time_range_type" @input="onRadioChange($event, 1)">
  102. <el-radio :label="1">按天预约</el-radio>
  103. <el-radio :label="2">按时间段预约</el-radio>
  104. </el-radio-group>
  105. </el-form-item>
  106. <el-form-item label="时段划分" v-if="value[currentIndex].reserve_time_range_type == 2">
  107. <el-radio-group v-model="value[currentIndex].time_slot_type" @input="onRadioChange">
  108. <el-radio :label="1">自定义时间段</el-radio>
  109. <el-radio :label="2">自动划分</el-radio>
  110. </el-radio-group>
  111. <div>
  112. <com-time-select ref="timeSelectChild" :date-list="value[currentIndex].reserve_date" :slot-type="value[currentIndex].time_slot_type"
  113. :price-type="value[currentIndex].reserve_price_type"
  114. :pre-selected-dates="value[currentIndex].selectTimeList" :select-list-str="selectListStr" :current-setting="value[currentIndex].finalData"
  115. @select="resetDateInfo1"></com-time-select>
  116. </div>
  117. </el-form-item>
  118. <el-form-item label="价格设置">
  119. <el-radio-group v-model="value[currentIndex].reserve_price_type" @input="onRadioChange($event, 2)">
  120. <el-radio :label="0">统一售价</el-radio>
  121. <el-radio :label="1" v-if="value[currentIndex].reserve_time_range_type == 2">按时间段设置</el-radio>
  122. <el-radio :label="2" v-if="value[currentIndex].reserve_time_range_type == 1">按天设置</el-radio>
  123. </el-radio-group>
  124. </el-form-item>
  125. </template>
  126. <template v-if="value[currentIndex].reserve_price_type == 0 || reserve_type == 1">
  127. <el-form-item label="售价" prop="price">
  128. <el-input placeholder="请输入价格" class="width-150" v-model="value[currentIndex].price" @input="onRadioChange">
  129. <template slot="append">元</template>
  130. </el-input>
  131. </el-form-item>
  132. <el-form-item label="划线价" prop="original_price">
  133. <el-input placeholder="请输入价格" class="width-150" v-model="value[currentIndex].original_price" @input="onRadioChange">
  134. <template slot="append">元</template>
  135. </el-input>
  136. <p class="tips-text">商品没有优惠的情况下,划线价在商品详情会以划线形式显示</p>
  137. </el-form-item>
  138. <el-form-item :label="value[currentIndex].reserve_time_range_type == 1 ? '每天最多可预约的数量' : '每段时间最多可预约数量'" prop="reserve_max_buy">
  139. <el-input placeholder="" class="width-150" v-model="value[currentIndex].reserve_max_buy" @input="onRadioChange"></el-input>
  140. </el-form-item>
  141. </template>
  142. <template v-if="reserve_type == 1">
  143. <el-form-item label="服务时长" prop="service_min">
  144. <el-input placeholder="请输入服务时长" class="width-150" v-model="value[currentIndex].service_min"
  145. @input="onRadioChange">
  146. <template slot="append">分钟</template>
  147. </el-input>
  148. </el-form-item>
  149. <el-form-item label="服务单位" prop="unit">
  150. <el-input placeholder="请输入服务单位" class="width-150" v-model="value[currentIndex].unit" maxlength="20" show-word-limit @input="onRadioChange"></el-input>
  151. </el-form-item>
  152. </template>
  153. <template v-if="value[currentIndex].reserve_price_type == 1">
  154. <el-form-item label="" prop="">
  155. <com-price-set ref="priceSetChild" :price-type="1" @on-update-selected-date="onUpdateSelectedDate"
  156. :date-list="value[currentIndex].finalData.length > 0 ? value[currentIndex].finalData : value[currentIndex].reserve_date"></com-price-set>
  157. </el-form-item>
  158. </template>
  159. <template v-if="value[currentIndex].reserve_price_type == 2">
  160. <el-form-item label="" prop="">
  161. <com-price-day-set ref="priceSetChild" :price-type="2" :date-list="value[currentIndex].finalData.length > 0 ? value[currentIndex].finalData : value[currentIndex].reserve_date"
  162. @on-update-selected-date="onUpdateSelectedDate"></com-price-day-set>
  163. </el-form-item>
  164. </template>
  165. </el-form>
  166. </div>
  167. </div>
  168. <el-dialog title="批量设置全部规格" :visible.sync="dialogFormVisible" width="60%">
  169. <div class="time-select-box">
  170. <el-form :model="unifiedForm" ref="unifiedForm" size="mini" label-width="150px" class="demo-unifiedForm">
  171. <el-form-item label="可预约时间" required prop="reserve_date_type">
  172. <el-radio v-model="unifiedForm.reserve_date_type" :label="1">选择范围</el-radio>
  173. <el-radio v-model="unifiedForm.reserve_date_type" :label="2">自选日期</el-radio>
  174. <div v-if="unifiedForm.reserve_date_type == 1" class="range-box">
  175. <el-date-picker v-if="unifiedForm.reserve_date_type == 1" v-model="checkRangeList" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateSelectChange"></el-date-picker>
  176. <div v-if="dayArr.length" class="range-check-box1">
  177. <el-checkbox-group v-model="checkWeekList" @change="weekSelectChange">
  178. <el-checkbox v-for="(item,inx) in dayArr" :key="inx" :label="item.txt"></el-checkbox>
  179. </el-checkbox-group>
  180. </div>
  181. </div>
  182. <div v-if="unifiedForm.reserve_date_type == 2" class="range-box">
  183. <el-date-picker v-if="unifiedForm.reserve_date_type == 2" type="dates" v-model="unifiedForm.reserve_date" value-format="yyyy-MM-dd" placeholder="选择一个或多个日期"></el-date-picker>
  184. </div>
  185. </el-form-item>
  186. <el-form-item label="预约模式" required prop="reserve_time_range_type">
  187. <el-radio v-model="unifiedForm.reserve_time_range_type" :label="1">按天预约</el-radio>
  188. <el-radio v-model="unifiedForm.reserve_time_range_type" :label="2">按时间段预约</el-radio>
  189. </el-form-item>
  190. <el-form-item label="时段划分" required prop="time_slot_type" v-if="unifiedForm.reserve_time_range_type == 2">
  191. <el-radio v-model="unifiedForm.time_slot_type" :label="1">自定义时间段</el-radio>
  192. <el-radio v-model="unifiedForm.time_slot_type" :label="2">自动划分</el-radio>
  193. <div v-if="unifiedForm.time_slot_type == 1 || unifiedForm.time_slot_type == 2">
  194. <com-time-select ref="timeSelect" :date-list="unifiedForm.reserve_date"
  195. :slot-type="unifiedForm.time_slot_type" :price-type="unifiedForm.reserve_price_type" @select="resetDateInfo"></com-time-select>
  196. </div>
  197. </el-form-item>
  198. <el-form-item label="价格设置" required prop="reserve_price_type">
  199. <el-radio v-model="unifiedForm.reserve_price_type" :label="0">统一售价</el-radio>
  200. <el-radio v-model="unifiedForm.reserve_price_type" :label="1" v-if="unifiedForm.reserve_time_range_type == 2">按时间段设置</el-radio>
  201. <el-radio v-model="unifiedForm.reserve_price_type" :label="2" v-if="unifiedForm.reserve_time_range_type == 1">按天设置</el-radio>
  202. </el-form-item>
  203. <template v-if="unifiedForm.reserve_price_type == 0">
  204. <el-form-item label="售价" required prop="price">
  205. <el-input placeholder="请输入价格" class="width-150" v-model="unifiedForm.price" onInput="value=toNumber(value,2)">
  206. <template slot="append">元</template>
  207. </el-input>
  208. </el-form-item>
  209. <el-form-item label="划线价" prop="original_price">
  210. <el-input placeholder="请输入价格" class="width-150" v-model="unifiedForm.original_price" onInput="value=toNumber(value,2)">
  211. <template slot="append">元</template>
  212. </el-input>
  213. <p class="tips-text">商品没有优惠的情况下,划线价在商品详情会以划线形式显示</p>
  214. </el-form-item>
  215. <el-form-item :label="unifiedForm.reserve_time_range_type == 1 ? '每天最多可预约的数量' : '每段时间最多可预约数量'" prop="reserve_max_buy">
  216. <el-input placeholder="" class="width-150" v-model="unifiedForm.reserve_max_buy"></el-input>
  217. </el-form-item>
  218. </template>
  219. <template v-if="reserve_type == 1">
  220. <el-form-item label="服务时长" required prop="service_min">
  221. <el-input placeholder="请输入服务时长" class="width-150" v-model="unifiedForm.service_min" onInput="value=toNumber(value,0)">
  222. <template slot="append">分钟</template>
  223. </el-input>
  224. </el-form-item>
  225. <el-form-item label="服务单位" required prop="unit">
  226. <el-input placeholder="请输入服务单位" class="width-150" v-model="unifiedForm.unit" maxlength="20" show-word-limit></el-input>
  227. </el-form-item>
  228. </template>
  229. <template v-if="unifiedForm.reserve_price_type == 1">
  230. <el-form-item label="" prop="">
  231. <com-price-set ref="priceSet" :price-type="1" @on-update-selected-date="onUpdateSelectedDate" :date-list="unifiedForm.finalData"></com-price-set>
  232. </el-form-item>
  233. </template>
  234. <template v-if="unifiedForm.reserve_price_type == 2">
  235. <el-form-item label="" prop="">
  236. <com-price-day-set ref="priceSet" :price-type="2" :date-list="unifiedForm.finalData" @on-update-selected-date="onUpdateSelectedDate"></com-price-day-set>
  237. </el-form-item>
  238. </template>
  239. </el-form>
  240. </div>
  241. <div slot="footer" class="dialog-footer">
  242. <el-button @click="dialogFormVisible = false">取 消</el-button>
  243. <el-button type="primary" @click="unifiedSetting">确 定</el-button>
  244. </div>
  245. </el-dialog>
  246. </div>
  247. </template>
  248. <script>
  249. Vue.component('com-attrs-setting', {
  250. template: '#com-attrs-setting',
  251. props: {
  252. value: {
  253. type: Array,
  254. default: () => {
  255. return []
  256. }
  257. },
  258. attrGroups: {
  259. type: Array,
  260. default: () => {
  261. return []
  262. }
  263. },
  264. reserve_type: {
  265. type: Number,
  266. default: 0
  267. }
  268. },
  269. data() {
  270. return {
  271. sign_id: '',
  272. currentIndex: 0,
  273. dialogFormVisible: false,
  274. unifiedForm: {
  275. reserve_date_type: 1, // 可预约时间类型(1范围 2自选日期)
  276. reserve_date: null, // 可预约日期
  277. reserve_time_range_type: 1, //预约模式(1按天预约 2按时间段预约)
  278. time_slot_type: 1, // 时间段划分方式(1自定义划分 2自动划分)
  279. reserve_time_slot: null, // 时间段划分
  280. reserve_price_type: 0, // 价格设置方式(0统一售价 1按日期时间段设置)
  281. reserve_time_slot_price: null, // 按时间段设置的价格
  282. reserve_week: [0,1,2,3,4,5,6], // 可预约周,如:0,1,2,3,4,5,6
  283. reserve_max_buy: 0, // 每天最大预约数量
  284. price: 0, // 售价
  285. original_price: 0, // 划线价
  286. service_min: 0, // 服务时长
  287. unit: '', // 单位
  288. },
  289. dayArr: [], //预约商品
  290. checkWeekList: [], //预约商品
  291. checkRangeList: [], //预约商品
  292. selectTimeList: [],
  293. currentItem: null,
  294. selectListStr: '',
  295. };
  296. },
  297. created() {},
  298. watch: {
  299. value: {
  300. handler(newvalue,oldvalue) {
  301. // console.log(newvalue, oldvalue, newvalue == oldvalue)
  302. // console.log(JSON.stringify(newvalue), JSON.stringify(oldvalue))
  303. this.$nextTick(() => {
  304. this.initData();
  305. });
  306. },
  307. immediate: true,
  308. deep: true
  309. },
  310. },
  311. computed: {},
  312. filters:{
  313. formatAttr(list){
  314. let str = '';
  315. list.forEach(item => {
  316. str = str + '+' + item.attr_name;
  317. });
  318. str = str.substring(1);
  319. return str;
  320. }
  321. },
  322. methods: {
  323. initData() {
  324. this.value.forEach(item => {
  325. item.isSelect = false;
  326. item.reserve_date_type = item.reserve_date_type || 1;
  327. item.reserve_date = item.reserve_date || null;
  328. item.reserve_time_range_type = item.reserve_time_range_type || 1;
  329. item.time_slot_type = item.time_slot_type || 1;
  330. item.reserve_time_slot = item.reserve_time_slot || null;
  331. item.reserve_price_type = item.reserve_price_type || 0;
  332. item.reserve_time_slot_price = item.reserve_time_slot_price || null;
  333. item.reserve_week = item.reserve_week || [0,1,2,3,4,5,6];
  334. item.reserve_max_buy = item.reserve_max_buy || null;
  335. item.price = item.price || null;
  336. item.original_price = item.original_price || null;
  337. item.dayArr = item.dayArr || [];
  338. item.checkWeekList = item.checkWeekList || [];
  339. item.checkRangeList = item.checkRangeList || [];
  340. item.selectTimeList = item.selectTimeList || [];
  341. item.finalData = item.finalData || [];
  342. item.service_min = item.service_min || null;
  343. item.unit = item.unit || '';
  344. });
  345. if(this.value[0]){
  346. if(this.currentIndex > this.value.length - 1){
  347. this.currentIndex = 0;
  348. }
  349. this.value[this.currentIndex].isSelect = true;
  350. this.sign_id = this.value[this.currentIndex].sign_id;
  351. this.currentItem = this.value[this.currentIndex]
  352. this.$forceUpdate();
  353. }
  354. },
  355. onAttr(index) {
  356. // console.log('this.value[this.currentIndex].finalData11', index, this.value[index].finalData, this.value[this.currentIndex].finalData,
  357. // this.value[index].reserve_price_type)
  358. // this.currentItem = this.value[index]
  359. // if (this.value[this.currentIndex].reserve_time_range_type == 2) {
  360. // console.log('this.$refs.timeSelectChild.currentSetting', this.$refs.timeSelectChild.currentSetting)
  361. // // this.$refs.timeSelectChild.currentSetting = this.value[index].finalData
  362. // }
  363. if(this.value[this.currentIndex].reserve_price_type == 1){
  364. this.value[this.currentIndex].finalData = JSON.parse(JSON.stringify(this.$refs.priceSetChild.selectedDates));
  365. }
  366. // console.log('this.value[this.currentIndex].finalData22', index, this.value[index].finalData, this.value[this.currentIndex].reserve_price_type,
  367. // this.value[index].reserve_price_type)
  368. let _ = this
  369. // this.$nextTick(() => {
  370. _.value.forEach(item => {
  371. item.isSelect = false;
  372. });
  373. _.value[index].isSelect = true;
  374. _.currentIndex = index;
  375. _.sign_id = this.value[index].sign_id;
  376. _.selectListStr = JSON.stringify(this.value[this.currentIndex].selectTimeList);
  377. // })
  378. // this.$forceUpdate()
  379. },
  380. onRadioChange(val, type) {
  381. switch (type) {
  382. case 1:
  383. this.$set(this.value[this.currentIndex], "reserve_price_type", 0)
  384. break;
  385. }
  386. this.$forceUpdate();
  387. },
  388. dateSelectChange(val) {
  389. let arr = [];
  390. let txtArr = [{val: 0,txt: '周日',children: []},{val: 1,txt: '周一',children: []},{val: 2,txt: '周二',children: []},{val: 3,txt: '周三',children: []},{val: 4,txt: '周四',children: []},{val: 5,txt: '周五',children: []},{val: 6,txt: '周六',children: []}];
  391. if (val) {
  392. let arr1 = [];
  393. let str1 = val[0];
  394. let str2 = val[1];
  395. let unixDb = str1.getTime() - 24 * 60 * 60 * 1000;
  396. let unixDe = str2.getTime() - 24 * 60 * 60 * 1000;
  397. for(let j = unixDb; j <= unixDe;){
  398. j = j + 24 * 60 * 60 * 1000
  399. arr1.push(new Date(parseInt(j)))
  400. }
  401. for(let i = 0; i < arr1.length; i++){
  402. txtArr.forEach(item => {
  403. if(item.val == arr1[i].getDay()){
  404. let fm = this.formatDate(arr1[i])
  405. item.children.push(fm);
  406. }
  407. })
  408. }
  409. txtArr.forEach(item => {
  410. if(item.children.length){
  411. arr.push(item);
  412. }
  413. });
  414. this.dayArr = arr;
  415. }
  416. this.checkWeekList = [];
  417. let warr = [];
  418. this.dayArr.forEach(item => {
  419. warr.push(item.txt);
  420. });
  421. this.checkWeekList = [...new Set(warr)];
  422. this.weekSelectChange();
  423. },
  424. dateSelectChange1(val) {
  425. let arr = [];
  426. let txtArr = [{val: 0,txt: '周日',children: []},{val: 1,txt: '周一',children: []},{val: 2,txt: '周二',children: []},{val: 3,txt: '周三',children: []},{val: 4,txt: '周四',children: []},{val: 5,txt: '周五',children: []},{val: 6,txt: '周六',children: []}];
  427. if (val) {
  428. let arr1 = [];
  429. let str1 = val[0];
  430. let str2 = val[1];
  431. let unixDb = str1.getTime() - 24 * 60 * 60 * 1000;
  432. let unixDe = str2.getTime() - 24 * 60 * 60 * 1000;
  433. for(let j = unixDb; j <= unixDe;){
  434. j = j + 24 * 60 * 60 * 1000
  435. arr1.push(new Date(parseInt(j)))
  436. }
  437. for(let i = 0; i < arr1.length; i++){
  438. txtArr.forEach(item => {
  439. if(item.val == arr1[i].getDay()){
  440. let fm = this.formatDate(arr1[i])
  441. item.children.push(fm);
  442. }
  443. })
  444. }
  445. txtArr.forEach(item => {
  446. if(item.children.length){
  447. arr.push(item);
  448. }
  449. });
  450. this.value[this.currentIndex].dayArr = arr;
  451. }
  452. this.value[this.currentIndex].checkWeekList = [];
  453. let warr = [];
  454. this.value[this.currentIndex].dayArr.forEach(item => {
  455. warr.push(item.txt);
  456. });
  457. this.value[this.currentIndex].checkWeekList = [...new Set(warr)];
  458. this.weekSelectChange1();
  459. this.$forceUpdate();
  460. },
  461. weekSelectChange() {
  462. let selectArr = [];
  463. let selectDateArr = [];
  464. for(let i = 0; i < this.dayArr.length; i++){
  465. this.checkWeekList.forEach(item => {
  466. if(item == this.dayArr[i].txt){
  467. selectArr.push(this.dayArr[i]);
  468. }
  469. });
  470. }
  471. for(let j = 0; j < selectArr.length; j++){
  472. selectDateArr = selectDateArr.concat(selectArr[j].children);
  473. }
  474. this.unifiedForm.reserve_date = selectDateArr;
  475. },
  476. weekSelectChange1() {
  477. let selectArr = [];
  478. let selectDateArr = [];
  479. for(let i = 0; i < this.value[this.currentIndex].dayArr.length; i++){
  480. this.value[this.currentIndex].checkWeekList.forEach(item => {
  481. if(item == this.value[this.currentIndex].dayArr[i].txt){
  482. selectArr.push(this.value[this.currentIndex].dayArr[i]);
  483. }
  484. });
  485. }
  486. for(let j = 0; j < selectArr.length; j++){
  487. selectDateArr = selectDateArr.concat(selectArr[j].children);
  488. }
  489. this.value[this.currentIndex].reserve_date = selectDateArr;
  490. this.$forceUpdate();
  491. },
  492. formatDate(date) {
  493. let result = '';
  494. let year = date.getFullYear().toString().padStart(4, '0');
  495. let month = (date.getMonth() + 1).toString().padStart(2, '0');
  496. let day = date.getDate().toString().padStart(2, '0');
  497. let hour = date.getHours().toString().padStart(2, '0');
  498. let minute = date.getMinutes().toString().padStart(2, '0');
  499. let second = date.getSeconds().toString().padStart(2, '0');
  500. result = `${year}-${month}-${day}`;
  501. return result;
  502. },
  503. resetDateInfo(e) {
  504. console.log('resetDateInforesetDateInforesetDateInforesetDateInfo----', e)
  505. this.selectTimeList = JSON.parse(JSON.stringify(e));
  506. if(this.unifiedForm.reserve_price_type == 1){
  507. let dates = e;
  508. if(this.unifiedForm.time_slot_type == 1){
  509. let arr = [];
  510. dates.forEach(item => {
  511. arr.push({
  512. date: item.date,
  513. times: item.children,
  514. isSelect: false
  515. });
  516. });
  517. arr[0].isSelect = true;
  518. this.$nextTick(() => {
  519. this.$refs.priceSet.initData(arr);
  520. });
  521. }
  522. if(this.unifiedForm.time_slot_type == 2){
  523. let arr1 = [];
  524. dates.forEach(item => {
  525. arr1.push({
  526. date: item.date,
  527. times: item.checkedIntervalList,
  528. isSelect: false
  529. });
  530. });
  531. arr1[0].isSelect = true;
  532. this.$nextTick(() => {
  533. this.$refs.priceSet.initData(arr1);
  534. });
  535. }
  536. }
  537. },
  538. resetDateInfo1(e) {
  539. this.value[this.currentIndex].selectTimeList = JSON.parse(JSON.stringify(e));
  540. let dates = e;
  541. // console.log('resetDateInfo1resetDateInfo1resetDateInfo1////',
  542. // this.currentIndex,
  543. // this.value[this.currentIndex].reserve_price_type,
  544. // this.value[this.currentIndex].time_slot_type,
  545. // this.value[this.currentIndex].reserve_time_range_type, e)
  546. // this.value[this.currentIndex].reserve_price_type == 0
  547. // this.value[this.currentIndex].time_slot_type == 1
  548. // if (this.value[this.currentIndex].reserve_time_range_type == 2) {
  549. // }
  550. // if (this.value[this.currentIndex].reserve_price_type == 0 &&
  551. // this.value[this.currentIndex].time_slot_type == 1 && this.value[this.currentIndex].reserve_time_range_type == 2) {
  552. // console.log('change finalData', this.currentIndex)
  553. // this.$set(this.value[this.currentIndex], 'finalData', JSON.parse(JSON.stringify(e)))
  554. // }
  555. if(this.value[this.currentIndex].reserve_price_type == 1){
  556. if(this.value[this.currentIndex].time_slot_type == 1){
  557. let arr = [];
  558. dates.forEach(item => {
  559. arr.push({
  560. date: item.date,
  561. times: item.children,
  562. isSelect: false
  563. });
  564. });
  565. if(this.value[this.currentIndex].finalData.length){
  566. let tarr = [];
  567. let selectedList = JSON.parse(JSON.stringify(this.value[this.currentIndex].finalData));
  568. let rarr2 = [];
  569. arr.forEach(item => {
  570. rarr2.push(item.date);
  571. });
  572. let rarr3 = [];
  573. selectedList.forEach(item => {
  574. if(rarr2.indexOf(item.date) > -1){
  575. arr.forEach(it => {
  576. if(it.date == item.date){
  577. item.times = it.times;
  578. }
  579. });
  580. rarr3.push(item);
  581. }
  582. });
  583. tarr = JSON.parse(JSON.stringify(rarr3));
  584. let oldDates2 = [];
  585. tarr.forEach(item => {
  586. oldDates2.push(item.date);
  587. });
  588. for(let i = 0;i < rarr2.length;i++){
  589. if(oldDates2.indexOf(rarr2[i]) < 0){
  590. tarr.push({
  591. date: rarr2[i],
  592. isSelect: false,
  593. times: []
  594. });
  595. }
  596. }
  597. if(tarr.length){
  598. tarr[0].isSelect = true;
  599. }
  600. this.$nextTick(() => {
  601. this.$refs.priceSetChild.initData(tarr);
  602. });
  603. }else{
  604. if(arr.length){
  605. arr[0].isSelect = true;
  606. }
  607. this.$nextTick(() => {
  608. this.$refs.priceSetChild.initData(arr);
  609. });
  610. }
  611. }
  612. if(this.value[this.currentIndex].time_slot_type == 2){
  613. let arr1 = [];
  614. dates.forEach(item => {
  615. arr1.push({
  616. date: item.date,
  617. times: item.checkedIntervalList,
  618. isSelect: false
  619. });
  620. });
  621. if(this.value[this.currentIndex].finalData.length){
  622. let tarr = [];
  623. let selectedList = JSON.parse(JSON.stringify(this.value[this.currentIndex].finalData));
  624. let rarr2 = [];
  625. arr1.forEach(item => {
  626. rarr2.push(item.date);
  627. });
  628. let rarr3 = [];
  629. selectedList.forEach(item => {
  630. if(rarr2.indexOf(item.date) > -1){
  631. arr1.forEach(it => {
  632. if(it.date == item.date){
  633. item.times = it.times;
  634. }
  635. });
  636. rarr3.push(item);
  637. }
  638. });
  639. tarr = JSON.parse(JSON.stringify(rarr3));
  640. let oldDates2 = [];
  641. tarr.forEach(item => {
  642. oldDates2.push(item.date);
  643. });
  644. for(let i = 0;i < rarr2.length;i++){
  645. if(oldDates2.indexOf(rarr2[i]) < 0){
  646. tarr.push({
  647. date: rarr2[i],
  648. isSelect: false,
  649. times: []
  650. });
  651. }
  652. }
  653. if(tarr.length){
  654. tarr[0].isSelect = true;
  655. }
  656. this.$nextTick(() => {
  657. this.$refs.priceSetChild.initData(tarr);
  658. });
  659. }else{
  660. if(arr1.length){
  661. arr1[0].isSelect = true;
  662. }
  663. this.$nextTick(() => {
  664. this.$refs.priceSetChild.initData(arr1);
  665. });
  666. }
  667. }
  668. this.$forceUpdate();
  669. }
  670. },
  671. formatInfo() {
  672. this.value.forEach(item => {
  673. item.selectTimeList = [];
  674. if(this.unifiedForm.reserve_price_type == 1){
  675. item.finalData = JSON.parse(JSON.stringify(this.$refs.priceSet.selectedDates));
  676. }
  677. this.selectTimeList.forEach(it => {
  678. item.selectTimeList.push({
  679. checkAll: it.checkAll,
  680. checkedIntervalList: JSON.parse(JSON.stringify(it.checkedIntervalList)),
  681. children: JSON.parse(JSON.stringify(it.children)),
  682. date: it.date,
  683. intervalList: JSON.parse(JSON.stringify(it.intervalList)),
  684. isIndeterminate: it.isIndeterminate,
  685. isSelect: it.isSelect,
  686. });
  687. });
  688. item.reserve_date_type = this.unifiedForm.reserve_date_type;
  689. item.reserve_date = this.unifiedForm.reserve_date;
  690. item.reserve_time_range_type = this.unifiedForm.reserve_time_range_type;
  691. item.time_slot_type = this.unifiedForm.time_slot_type;
  692. item.reserve_time_slot = this.unifiedForm.reserve_time_slot;
  693. item.reserve_price_type = this.unifiedForm.reserve_price_type;
  694. item.reserve_time_slot_price = this.unifiedForm.reserve_time_slot_price;
  695. item.reserve_week = this.unifiedForm.reserve_week;
  696. item.reserve_max_buy = this.unifiedForm.reserve_max_buy;
  697. item.price = this.unifiedForm.price;
  698. item.original_price = this.unifiedForm.original_price;
  699. item.dayArr = this.dayArr;
  700. item.checkWeekList = this.checkWeekList;
  701. item.checkRangeList = this.checkRangeList;
  702. item.service_min = this.unifiedForm.service_min;
  703. item.unit = this.unifiedForm.unit;
  704. if(this.unifiedForm.reserve_price_type == 2){
  705. item.finalData = JSON.parse(JSON.stringify(this.$refs.priceSet.selectedDates));
  706. }
  707. });
  708. },
  709. async unifiedSetting() {
  710. await this.formatInfo();
  711. this.$nextTick(() => {
  712. this.formatInfo();
  713. setTimeout(()=>{
  714. this.formatInfo();
  715. this.$refs.timeSelectChild.initData();
  716. this.dialogFormVisible = false;
  717. },500);
  718. });
  719. },
  720. onUpdateSelectedDate(val) {
  721. console.log('this.value[this.currentIndex]', this.value[this.currentIndex])
  722. this.$set(this.value[this.currentIndex], 'finalData', val)
  723. // this.value[this.currentIndex].finalData = val
  724. }
  725. }
  726. });
  727. </script>