com-attrs-setting.php 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751
  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. if (JSON.stringify(newvalue) === JSON.stringify(oldvalue)) {
  302. return;
  303. }
  304. this.$nextTick(() => {
  305. if (!Array.isArray(newvalue)) {
  306. return;
  307. }
  308. const valueData = JSON.parse(JSON.stringify(newvalue));
  309. let needUpdate = false;
  310. valueData.forEach(item => {
  311. if (!item.isSelect && !item.reserve_date_type) {
  312. needUpdate = true;
  313. }
  314. item.isSelect = item.isSelect || false;
  315. item.reserve_date_type = item.reserve_date_type || 1;
  316. item.reserve_date = item.reserve_date || null;
  317. item.reserve_time_range_type = item.reserve_time_range_type || 1;
  318. item.time_slot_type = item.time_slot_type || 1;
  319. item.reserve_time_slot = item.reserve_time_slot || null;
  320. item.reserve_price_type = item.reserve_price_type || 0;
  321. item.reserve_time_slot_price = item.reserve_time_slot_price || null;
  322. item.reserve_week = item.reserve_week || [0,1,2,3,4,5,6];
  323. item.reserve_max_buy = item.reserve_max_buy || null;
  324. item.price = item.price || null;
  325. item.original_price = item.original_price || null;
  326. item.dayArr = item.dayArr || [];
  327. item.checkWeekList = item.checkWeekList || [];
  328. item.checkRangeList = item.checkRangeList || [];
  329. item.selectTimeList = item.selectTimeList || [];
  330. item.finalData = item.finalData || [];
  331. item.service_min = item.service_min || null;
  332. item.unit = item.unit || '';
  333. });
  334. if(this.currentIndex > valueData.length - 1) {
  335. this.currentIndex = 0;
  336. needUpdate = true;
  337. }
  338. if(valueData[0]){
  339. if(!valueData[this.currentIndex].isSelect) {
  340. valueData[this.currentIndex].isSelect = true;
  341. this.sign_id = valueData[this.currentIndex].sign_id;
  342. this.currentItem = valueData[this.currentIndex];
  343. needUpdate = true;
  344. }
  345. }
  346. if (needUpdate) {
  347. this.$emit('input', valueData);
  348. }
  349. // 确保视图更新
  350. this.$nextTick(() => {
  351. this.$forceUpdate();
  352. });
  353. });
  354. },
  355. immediate: true,
  356. deep: true
  357. },
  358. },
  359. computed: {},
  360. filters: {
  361. formatAttr(list) {
  362. let str = '';
  363. list.forEach(item => {
  364. str = str + '+' + item.attr_name;
  365. });
  366. str = str.substring(1);
  367. return str;
  368. }
  369. },
  370. methods: {
  371. onAttr(index) {
  372. if (this.value[this.currentIndex] && this.value[this.currentIndex].reserve_price_type == 1) {
  373. this.value[this.currentIndex].finalData = this.$refs.priceSetChild ?
  374. JSON.parse(JSON.stringify(this.$refs.priceSetChild.selectedDates)) : [];
  375. }
  376. this.value.forEach(item => {
  377. item.isSelect = false;
  378. });
  379. this.value[index].isSelect = true;
  380. this.currentIndex = index;
  381. this.sign_id = this.value[index].sign_id;
  382. this.selectListStr = JSON.stringify(this.value[this.currentIndex].selectTimeList || []);
  383. this.$nextTick(() => {
  384. if (this.$refs.timeSelectChild) {
  385. this.$refs.timeSelectChild.initData();
  386. }
  387. });
  388. },
  389. onRadioChange(val, type) {
  390. switch (type) {
  391. case 1:
  392. this.$set(this.value[this.currentIndex], "reserve_price_type", 0)
  393. break;
  394. }
  395. this.$forceUpdate();
  396. },
  397. dateSelectChange(val) {
  398. let arr = [];
  399. 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: []}];
  400. if (val) {
  401. let arr1 = [];
  402. let str1 = val[0];
  403. let str2 = val[1];
  404. let unixDb = str1.getTime() - 24 * 60 * 60 * 1000;
  405. let unixDe = str2.getTime() - 24 * 60 * 60 * 1000;
  406. for(let j = unixDb; j <= unixDe;){
  407. j = j + 24 * 60 * 60 * 1000
  408. arr1.push(new Date(parseInt(j)))
  409. }
  410. for(let i = 0; i < arr1.length; i++){
  411. txtArr.forEach(item => {
  412. if(item.val == arr1[i].getDay()){
  413. let fm = this.formatDate(arr1[i])
  414. item.children.push(fm);
  415. }
  416. })
  417. }
  418. txtArr.forEach(item => {
  419. if(item.children.length){
  420. arr.push(item);
  421. }
  422. });
  423. this.dayArr = arr;
  424. }
  425. this.checkWeekList = [];
  426. let warr = [];
  427. this.dayArr.forEach(item => {
  428. warr.push(item.txt);
  429. });
  430. this.checkWeekList = [...new Set(warr)];
  431. this.weekSelectChange();
  432. },
  433. dateSelectChange1(val) {
  434. let arr = [];
  435. 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: []}];
  436. if (val) {
  437. let arr1 = [];
  438. let str1 = val[0];
  439. let str2 = val[1];
  440. let unixDb = str1.getTime() - 24 * 60 * 60 * 1000;
  441. let unixDe = str2.getTime() - 24 * 60 * 60 * 1000;
  442. for(let j = unixDb; j <= unixDe;){
  443. j = j + 24 * 60 * 60 * 1000
  444. arr1.push(new Date(parseInt(j)))
  445. }
  446. for(let i = 0; i < arr1.length; i++){
  447. txtArr.forEach(item => {
  448. if(item.val == arr1[i].getDay()){
  449. let fm = this.formatDate(arr1[i])
  450. item.children.push(fm);
  451. }
  452. })
  453. }
  454. txtArr.forEach(item => {
  455. if(item.children.length){
  456. arr.push(item);
  457. }
  458. });
  459. this.value[this.currentIndex].dayArr = arr;
  460. }
  461. this.value[this.currentIndex].checkWeekList = [];
  462. let warr = [];
  463. this.value[this.currentIndex].dayArr.forEach(item => {
  464. warr.push(item.txt);
  465. });
  466. this.value[this.currentIndex].checkWeekList = [...new Set(warr)];
  467. this.weekSelectChange1();
  468. this.$forceUpdate();
  469. },
  470. weekSelectChange() {
  471. let selectArr = [];
  472. let selectDateArr = [];
  473. for(let i = 0; i < this.dayArr.length; i++){
  474. this.checkWeekList.forEach(item => {
  475. if(item == this.dayArr[i].txt){
  476. selectArr.push(this.dayArr[i]);
  477. }
  478. });
  479. }
  480. for(let j = 0; j < selectArr.length; j++){
  481. selectDateArr = selectDateArr.concat(selectArr[j].children);
  482. }
  483. this.unifiedForm.reserve_date = selectDateArr;
  484. },
  485. weekSelectChange1() {
  486. let selectArr = [];
  487. let selectDateArr = [];
  488. for(let i = 0; i < this.value[this.currentIndex].dayArr.length; i++){
  489. this.value[this.currentIndex].checkWeekList.forEach(item => {
  490. if(item == this.value[this.currentIndex].dayArr[i].txt){
  491. selectArr.push(this.value[this.currentIndex].dayArr[i]);
  492. }
  493. });
  494. }
  495. for(let j = 0; j < selectArr.length; j++){
  496. selectDateArr = selectDateArr.concat(selectArr[j].children);
  497. }
  498. this.value[this.currentIndex].reserve_date = selectDateArr;
  499. this.$forceUpdate();
  500. },
  501. formatDate(date) {
  502. let result = '';
  503. let year = date.getFullYear().toString().padStart(4, '0');
  504. let month = (date.getMonth() + 1).toString().padStart(2, '0');
  505. let day = date.getDate().toString().padStart(2, '0');
  506. let hour = date.getHours().toString().padStart(2, '0');
  507. let minute = date.getMinutes().toString().padStart(2, '0');
  508. let second = date.getSeconds().toString().padStart(2, '0');
  509. result = `${year}-${month}-${day}`;
  510. return result;
  511. },
  512. resetDateInfo(e) {
  513. console.log('resetDateInforesetDateInforesetDateInforesetDateInfo----', e)
  514. this.selectTimeList = JSON.parse(JSON.stringify(e));
  515. if(this.unifiedForm.reserve_price_type == 1){
  516. let dates = e;
  517. if(this.unifiedForm.time_slot_type == 1){
  518. let arr = [];
  519. dates.forEach(item => {
  520. arr.push({
  521. date: item.date,
  522. times: item.children,
  523. isSelect: false
  524. });
  525. });
  526. arr[0].isSelect = true;
  527. this.$nextTick(() => {
  528. this.$refs.priceSet.initData(arr);
  529. });
  530. }
  531. if(this.unifiedForm.time_slot_type == 2){
  532. let arr1 = [];
  533. dates.forEach(item => {
  534. arr1.push({
  535. date: item.date,
  536. times: item.checkedIntervalList,
  537. isSelect: false
  538. });
  539. });
  540. arr1[0].isSelect = true;
  541. this.$nextTick(() => {
  542. this.$refs.priceSet.initData(arr1);
  543. });
  544. }
  545. }
  546. },
  547. resetDateInfo1(e) {
  548. this.value[this.currentIndex].selectTimeList = JSON.parse(JSON.stringify(e));
  549. let dates = e;
  550. // console.log('resetDateInfo1resetDateInfo1resetDateInfo1////',
  551. // this.currentIndex,
  552. // this.value[this.currentIndex].reserve_price_type,
  553. // this.value[this.currentIndex].time_slot_type,
  554. // this.value[this.currentIndex].reserve_time_range_type, e)
  555. // this.value[this.currentIndex].reserve_price_type == 0
  556. // this.value[this.currentIndex].time_slot_type == 1
  557. // if (this.value[this.currentIndex].reserve_time_range_type == 2) {
  558. // }
  559. // if (this.value[this.currentIndex].reserve_price_type == 0 &&
  560. // this.value[this.currentIndex].time_slot_type == 1 && this.value[this.currentIndex].reserve_time_range_type == 2) {
  561. // console.log('change finalData', this.currentIndex)
  562. // this.$set(this.value[this.currentIndex], 'finalData', JSON.parse(JSON.stringify(e)))
  563. // }
  564. if(this.value[this.currentIndex].reserve_price_type == 1){
  565. if(this.value[this.currentIndex].time_slot_type == 1){
  566. let arr = [];
  567. dates.forEach(item => {
  568. arr.push({
  569. date: item.date,
  570. times: item.children,
  571. isSelect: false
  572. });
  573. });
  574. if(this.value[this.currentIndex].finalData.length){
  575. let tarr = [];
  576. let selectedList = JSON.parse(JSON.stringify(this.value[this.currentIndex].finalData));
  577. let rarr2 = [];
  578. arr.forEach(item => {
  579. rarr2.push(item.date);
  580. });
  581. let rarr3 = [];
  582. selectedList.forEach(item => {
  583. if(rarr2.indexOf(item.date) > -1){
  584. arr.forEach(it => {
  585. if(it.date == item.date){
  586. item.times = it.times;
  587. }
  588. });
  589. rarr3.push(item);
  590. }
  591. });
  592. tarr = JSON.parse(JSON.stringify(rarr3));
  593. let oldDates2 = [];
  594. tarr.forEach(item => {
  595. oldDates2.push(item.date);
  596. });
  597. for(let i = 0;i < rarr2.length;i++){
  598. if(oldDates2.indexOf(rarr2[i]) < 0){
  599. tarr.push({
  600. date: rarr2[i],
  601. isSelect: false,
  602. times: []
  603. });
  604. }
  605. }
  606. if(tarr.length){
  607. tarr[0].isSelect = true;
  608. }
  609. this.$nextTick(() => {
  610. this.$refs.priceSetChild.initData(tarr);
  611. });
  612. }else{
  613. if(arr.length){
  614. arr[0].isSelect = true;
  615. }
  616. this.$nextTick(() => {
  617. this.$refs.priceSetChild.initData(arr);
  618. });
  619. }
  620. }
  621. if(this.value[this.currentIndex].time_slot_type == 2){
  622. let arr1 = [];
  623. dates.forEach(item => {
  624. arr1.push({
  625. date: item.date,
  626. times: item.checkedIntervalList,
  627. isSelect: false
  628. });
  629. });
  630. if(this.value[this.currentIndex].finalData.length){
  631. let tarr = [];
  632. let selectedList = JSON.parse(JSON.stringify(this.value[this.currentIndex].finalData));
  633. let rarr2 = [];
  634. arr1.forEach(item => {
  635. rarr2.push(item.date);
  636. });
  637. let rarr3 = [];
  638. selectedList.forEach(item => {
  639. if(rarr2.indexOf(item.date) > -1){
  640. arr1.forEach(it => {
  641. if(it.date == item.date){
  642. item.times = it.times;
  643. }
  644. });
  645. rarr3.push(item);
  646. }
  647. });
  648. tarr = JSON.parse(JSON.stringify(rarr3));
  649. let oldDates2 = [];
  650. tarr.forEach(item => {
  651. oldDates2.push(item.date);
  652. });
  653. for(let i = 0;i < rarr2.length;i++){
  654. if(oldDates2.indexOf(rarr2[i]) < 0){
  655. tarr.push({
  656. date: rarr2[i],
  657. isSelect: false,
  658. times: []
  659. });
  660. }
  661. }
  662. if(tarr.length){
  663. tarr[0].isSelect = true;
  664. }
  665. this.$nextTick(() => {
  666. this.$refs.priceSetChild.initData(tarr);
  667. });
  668. }else{
  669. if(arr1.length){
  670. arr1[0].isSelect = true;
  671. }
  672. this.$nextTick(() => {
  673. this.$refs.priceSetChild.initData(arr1);
  674. });
  675. }
  676. }
  677. this.$forceUpdate();
  678. }
  679. },
  680. formatInfo() {
  681. this.value.forEach(item => {
  682. item.selectTimeList = [];
  683. if(this.unifiedForm.reserve_price_type == 1){
  684. item.finalData = JSON.parse(JSON.stringify(this.$refs.priceSet.selectedDates));
  685. }
  686. this.selectTimeList.forEach(it => {
  687. item.selectTimeList.push({
  688. checkAll: it.checkAll,
  689. checkedIntervalList: JSON.parse(JSON.stringify(it.checkedIntervalList)),
  690. children: JSON.parse(JSON.stringify(it.children)),
  691. date: it.date,
  692. intervalList: JSON.parse(JSON.stringify(it.intervalList)),
  693. isIndeterminate: it.isIndeterminate,
  694. isSelect: it.isSelect,
  695. });
  696. });
  697. item.reserve_date_type = this.unifiedForm.reserve_date_type;
  698. item.reserve_date = this.unifiedForm.reserve_date;
  699. item.reserve_time_range_type = this.unifiedForm.reserve_time_range_type;
  700. item.time_slot_type = this.unifiedForm.time_slot_type;
  701. item.reserve_time_slot = this.unifiedForm.reserve_time_slot;
  702. item.reserve_price_type = this.unifiedForm.reserve_price_type;
  703. item.reserve_time_slot_price = this.unifiedForm.reserve_time_slot_price;
  704. item.reserve_week = this.unifiedForm.reserve_week;
  705. item.reserve_max_buy = this.unifiedForm.reserve_max_buy;
  706. item.price = this.unifiedForm.price;
  707. item.original_price = this.unifiedForm.original_price;
  708. item.dayArr = this.dayArr;
  709. item.checkWeekList = this.checkWeekList;
  710. item.checkRangeList = this.checkRangeList;
  711. item.service_min = this.unifiedForm.service_min;
  712. item.unit = this.unifiedForm.unit;
  713. if(this.unifiedForm.reserve_price_type == 2){
  714. item.finalData = JSON.parse(JSON.stringify(this.$refs.priceSet.selectedDates));
  715. }
  716. });
  717. },
  718. async unifiedSetting() {
  719. await this.formatInfo();
  720. this.$nextTick(() => {
  721. this.formatInfo();
  722. setTimeout(()=>{
  723. this.formatInfo();
  724. this.$refs.timeSelectChild.initData();
  725. this.dialogFormVisible = false;
  726. },500);
  727. });
  728. },
  729. onUpdateSelectedDate(val) {
  730. console.log('this.value[this.currentIndex]', this.value[this.currentIndex])
  731. this.$set(this.value[this.currentIndex], 'finalData', val)
  732. // this.value[this.currentIndex].finalData = val
  733. }
  734. }
  735. });
  736. </script>