zfire-newmall-admin/src/views/valueAddedService/orderSettleManag/mixins/serviceInfo.js

import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import { increOrderSettleGetBrand, increOrderSettleGetCategoryList, increOrderSettleGetIncreItem, increOrderSettleGetWebsit } from "@/api/orderSettleManag.js"
export default {
  data() {
    return {
      brandList: [],
      mainList: [],
      increContentList: [],
      websitList: []
    }
  },
  computed: {
    serviceInfo() {
      return [
        {
          name: 'el-select',
          md: 6,
          attributes: { disabled: false, placeholder: '请输入' },
          formItemAttributes: {
            label: '服务类型',
            prop: 'increType',
            rules: [...required]
          },
          options: [{ label: "延保", value: 1 }],
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '请输入' },
          formItemAttributes: {
            label: '使用类型',
            prop: 'shiyongleixing',
            rules: [...required]
          }
        },
        {
          name: 'el-select',
          md: 6,
          options: this.brandList,
          formItemAttributes: {
            label: '产品品牌',
            prop: 'brandId',
            rules: [...required]
          },
          attributes: { disabled: false, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: (val) => {
              this.mainList = []
              this.increContentList = []
              this.websitList = []
              this.addFormData.brandName = ""
              this.addFormData.mainId = ""
              this.addFormData.mainName = ""
              this.addFormData.mainImg = ""
              this.addFormData.increContent = ""
              this.addFormData.pgIncreId = ""
              this.addFormData.limitNum = ""
              this.addFormData.amount = ""
              this.addFormData.pgIncreItemId = ""
              this.addFormData.websitId = ""
              this.addFormData.websitName = ""
              if (val) {
                this.addFormData.brandName = this.brandList.find(item => item.value === val)?.label
                increOrderSettleGetCategoryList({ brand: this.addFormData.brandName }).then(res => {
                  this.mainList = res.data.map(item => ({
                    label: item.name,
                    value: item.categoryId,
                    data: item
                  }))
                })
              }
            }
          }
        },
        {
          name: 'el-select',
          md: 6,
          options: this.mainList,
          formItemAttributes: {
            label: '产品大类',
            prop: 'mainId',
            rules: [...required]
          },
          attributes: { disabled: false, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: (val) => {
              this.increContentList = []
              this.websitList = []
              this.addFormData.mainName = ""
              this.addFormData.mainImg = ""
              this.addFormData.increContent = ""
              this.addFormData.pgIncreId = ""
              this.addFormData.limitNum = ""
              this.addFormData.amount = ""
              this.addFormData.pgIncreItemId = ""
              this.addFormData.websitId = ""
              this.addFormData.websitName = ""
              if (val) {
                this.addFormData.mainName = this.mainList.find(item => item.value === val)?.label
                this.addFormData.mainImg = this.mainList.find(item => item.value === val)?.data?.imgUrl
                increOrderSettleGetIncreItem({
                  brand: this.addFormData.brandName,
                  mainName: this.addFormData.mainName
                }).then(res => {
                  this.increContentList = res.data.map(item => ({
                    label: item.content,
                    value: item.increId,
                    data: item
                  }))
                })
              }
            }
          }
        },
        {
          name: 'el-select',
          md: 12,
          formItemAttributes: {
            label: '服务内容',
            prop: 'pgIncreId',
            rules: [...required],
          },
          options: this.increContentList,
          attributes: { disabled: false, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: (val) => {
              this.websitList = []
              this.addFormData.limitNum = ""
              this.addFormData.amount = ""
              this.addFormData.pgIncreItemId = ""
              this.addFormData.websitId = ""
              this.addFormData.websitName = ""
              this.addFormData.serviceEndTime = ""
              this.addFormData.increContent = ""
              if (val) {
                var data = this.increContentList.find(item => item.value === val)
                this.addFormData.increContent = data.data.content;
                this.addFormData.limitNum = data.data.limitNum;
                this.addFormData.amount = data.data.amount;
                this.addFormData.pgIncreItemId = data.data.id;
                if (this.addFormData.insureTime && this.addFormData.limitNum) {
                  // 初始日期
                  const initialDate = new Date(this.addFormData.insureTime);
                  // 加上三年
                  initialDate.setFullYear(initialDate.getFullYear() + (this.addFormData.limitNum || 0));
                  // 获取新的日期
                  this.addFormData.serviceEndTime = initialDate.toISOString().split('T')[0];
                }
                increOrderSettleGetWebsit({
                  increId: val
                }).then(res => {
                  this.websitList = res.data.map(item => ({
                    value: item.websitId,
                    label: item.websitName,
                  }))
                })
              }
            }
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: true, placeholder: '请输入' },
          formItemAttributes: {
            label: '使用限值',
            prop: 'limitNum',
            rules: [...required]
          },
          events: {
            change: (val) => {
              if (this.addFormData.insureTime && val) {
                // 初始日期
                const initialDate = new Date(this.addFormData.insureTime);
                // 加上三年
                initialDate.setFullYear(initialDate.getFullYear() + (val || 0));
                // 获取新的日期
                this.addFormData.serviceEndTime = initialDate.toISOString().split('T')[0];
              } else {
                this.addFormData.serviceEndTime = ""
              }
            }
          }
        },
        {
          name: 'el-input',
          md: 6,
          attributes: { disabled: false, placeholder: '请输入', type: 'number' },
          formItemAttributes: {
            label: '服务金额',
            prop: 'amount',
            rules: [...required]
          }
        },
        {
          name: 'el-select',
          md: 12,
          formItemAttributes: {
            label: '销售网点',
            prop: 'websitId',
            rules: [...required],
          },
          options: this.websitList,
          attributes: { disabled: false, clearable: true, filterable: true, placeholder: '请选择' },
          events: {
            change: (val) => {
              this.addFormData.websitName = ""
              if (val) {
                this.addFormData.websitName = this.websitList.find(item => item.value === val)?.label
              }
            }
          }
        },
        {
          name: 'el-radio',
          md: 12,
          formItemAttributes: {
            label: '支付方式',
            prop: 'payType',
            rules: [...required],
          },
          options: [{ label: "微信支付", value: 1 }, { label: "现金支付", value: 3 }],
          attributes: { disabled: false, placeholder: '请选择' },
        },
      ]
    }
  },
  methods: {
    getincreOrderSettleGetBrand() {
      increOrderSettleGetBrand().then(res => {
        this.brandList = res.data.map(item => ({
          label: item.brandName,
          value: item.id
        }))
      })
    }
  }
}