com-attrs-setting.php 40 KB

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