mall4vp-bbc/src/views/modules/sys/webConfig-add-or-update.vue

<template>
  <el-dialog
    :title="!dataForm.id ? this.$i18n.t('sysManagement.add') : this.$i18n.t('sysManagement.modify')"
    :close-on-click-modal="false"
    top="10vh"
    :visible.sync="visible"
    class="el-dialog-body"
    >
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="142px">
      <!--后台相关配置-->
      <span v-if="this.dataForm.configType === 1 || this.dataForm.configType === 4">

        <el-form-item :label="this.$i18n.t('webInfoConfig.loginLogo')" prop="bsLoginLogoImg">
          <imgs-upload v-model="dataForm.bsLoginLogoImg" :limit="1" :size="'380*96'" />
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.loginBg')" prop="bsLoginBgImg">
          <imgs-upload v-model="dataForm.bsLoginBgImg" :limit="1" :size="'1920*940'" />
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.bsCopyright')+'-'+this.$i18n.t('webInfoConfig.chinese')" prop="bsCopyrightCn">
          <el-input v-model="dataForm.bsCopyrightCn" size="small"></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.bsCopyright')+'-'+this.$i18n.t('webInfoConfig.english')" prop="bsCopyrightEn">
          <el-input v-model="dataForm.bsCopyrightEn" size="small"></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.bsTitleContent')+'-'+this.$i18n.t('webInfoConfig.chinese')" prop="bsTitleContentCn">
          <el-input v-model="dataForm.bsTitleContentCn"  maxlength="15" size="small" show-word-limit></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.bsTitleContent')+'-'+this.$i18n.t('webInfoConfig.english')" prop="bsTitleContentEn">
          <el-input v-model="dataForm.bsTitleContentEn" maxlength="20" size="small" show-word-limit></el-input>
        </el-form-item>

         <el-form-item :label="this.$i18n.t('webInfoConfig.pcTitleImg')" prop="bsTitleImg">
          <imgs-upload v-model="dataForm.bsTitleImg" :limit="1" :size="'100*100'"  />
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.TopIcon')" prop="bsTopBarIcon">
          <imgs-upload v-model="dataForm.bsTopBarIcon" :limit="1" :size="'160*48'"  />
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.bsMenuTitleOpen')+'-'+this.$i18n.t('webInfoConfig.chinese')" prop="bsMenuTitleOpenCn">
          <el-input v-model="dataForm.bsMenuTitleOpenCn" maxlength="15" size="small" show-word-limit></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.bsMenuTitleOpen')+'-'+this.$i18n.t('webInfoConfig.english')" prop="bsMenuTitleOpenEn">
          <el-input v-model="dataForm.bsMenuTitleOpenEn" maxlength="20" size="small" show-word-limit></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.bsMenuTitleClose')+'-'+this.$i18n.t('webInfoConfig.chinese')" prop="bsMenuTitleCloseCn">
          <el-input v-model="dataForm.bsMenuTitleCloseCn" maxlength="6" size="small" show-word-limit></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.bsMenuTitleClose')+'-'+this.$i18n.t('webInfoConfig.english')" prop="bsMenuTitleCloseEn">
          <el-input v-model="dataForm.bsMenuTitleCloseEn" maxlength="6" size="small" show-word-limit></el-input>
        </el-form-item>

        <el-form-item label="关联店铺" prop="shopId">
          <el-select v-model="dataForm.shopId" placeholder="请选择" controls-position="right">
            <el-option v-for="item in shopList" :key="item.shopId" :label="item.shopName" :value="item.shopId">
            </el-option>
          </el-select>
          <!-- <el-input v-model="dataForm.shopId" size="small"></el-input> -->
        </el-form-item>
      </span>

      <!--PC端相关配置-->
      <span v-if="this.dataForm.configType === 2">

        <el-form-item :label="this.$i18n.t('webInfoConfig.logo')" prop="pcLogoImg">
          <imgs-upload v-model="dataForm.pcLogoImg" :limit="1" :size="'100*100'" />
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.loginBg')" prop="pcLoginBgImg">
          <imgs-upload v-model="dataForm.pcLoginBgImg" :limit="1" :size="'1920*600'" />
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.bsCopyright')+'-'+this.$i18n.t('webInfoConfig.chinese')" prop="pcCopyrightCn">
          <el-input v-model="dataForm.pcCopyrightCn" size="small"></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.bsCopyright')+'-'+this.$i18n.t('webInfoConfig.english')" prop="pcCopyrightEn">
          <el-input v-model="dataForm.pcCopyrightEn" size="small"></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.pcQrcodeImg')" prop="pcQrcodeImg">
          <imgs-upload v-model="dataForm.pcQrcodeImg" :limit="1" :size="'100*100'" />
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.pcCompanyName')+'-'+this.$i18n.t('webInfoConfig.chinese')" prop="pcCompanyNameCn">
          <el-input v-model="dataForm.pcCompanyNameCn" size="small"></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.pcCompanyName')+'-'+this.$i18n.t('webInfoConfig.english')" prop="pcCompanyNameEn">
          <el-input v-model="dataForm.pcCompanyNameEn" size="small"></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.pcCompanyInfo')+'-'+this.$i18n.t('webInfoConfig.chinese')" prop="pcCompanyInfoCn">
          <el-input type="textarea" v-model="dataForm.pcCompanyInfoCn" size="small"></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.pcCompanyInfo')+'-'+this.$i18n.t('webInfoConfig.english')" prop="pcCompanyInfoEn">
          <el-input type="textarea" v-model="dataForm.pcCompanyInfoEn" size="small"></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.pcTitleContent')+'-'+this.$i18n.t('webInfoConfig.chinese')" prop="pcTitleContentCn">
          <el-input v-model="dataForm.pcTitleContentCn" size="small"></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.pcTitleContent')+'-'+this.$i18n.t('webInfoConfig.english')" prop="pcTitleContentEn">
          <el-input v-model="dataForm.pcTitleContentEn" size="small"></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.pcTitleImg')" prop="pcTitleImg">
          <imgs-upload v-model="dataForm.pcTitleImg" :limit="1" :size="'100*100'" />
        </el-form-item>
<!--        <el-form-item label="公司简写名称-中文" prop="pcCompanyNameShortCn">-->
<!--          <el-input v-model="dataForm.pcCompanyNameShortCn"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="公司简写名称-英文" prop="pcCompanyNameShortEn">-->
<!--          <el-input v-model="dataForm.pcCompanyNameShortEn"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item :label="this.$i18n.t('webInfoConfig.pcLogoImgText')" prop="pcLogoImgText">
          <imgs-upload v-model="dataForm.pcLogoImgText" :limit="1" :size="'380*96'" />
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.pcWelcome')+'-'+this.$i18n.t('webInfoConfig.chinese')" prop="pcWelcomeCn">
          <el-input v-model="dataForm.pcWelcomeCn" size="small"></el-input>
        </el-form-item>

        <el-form-item :label="this.$i18n.t('webInfoConfig.pcWelcome')+'-'+this.$i18n.t('webInfoConfig.english')" prop="pcWelcomeEn">
          <el-input v-model="dataForm.pcWelcomeEn" size="small"></el-input>
        </el-form-item>


      </span>

      <!--H5端相关配置-->
      <span v-if="this.dataForm.configType === 3">
        <el-form-item :label="this.$i18n.t('webInfoConfig.loginLogo')" prop="uniLoginLogoImg">
          <imgs-upload v-model="dataForm.uniLoginLogoImg" :limit="1" :size="'100*100'" />
        </el-form-item>
      </span>

      <!--自提点端相关配置-->
      <span v-if="this.dataForm.configType === 5">
        <el-form-item :label="this.$i18n.t('webInfoConfig.loginLogo')" prop="stationLoginLogoImg">
          <imgs-upload v-model="dataForm.stationLoginLogoImg" :limit="1" :size="'100*100'" />
        </el-form-item>
      </span>

      <el-form-item :label="this.$i18n.t('webInfoConfig.activationStatus')" prop="isActivity">
        <el-radio-group v-model="dataForm.isActivity">
          <el-radio :label="0">{{$i18n.t('webInfoConfig.close')}}</el-radio>
          <el-radio :label="1">{{$i18n.t('webInfoConfig.open')}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <div class="default-btn" @click="visible = false">{{$i18n.t('webInfoConfig.cancellation')}}</div>
      <div class="default-btn primary-btn" @click="dataFormSubmit()">{{$i18n.t('webInfoConfig.determine')}}</div>
      <!-- <el-button @click="visible = false">{{$i18n.t('webInfoConfig.cancellation')}}</el-button>
      <el-button type="primary" @click="dataFormSubmit()">{{$i18n.t('webInfoConfig.determine')}}</el-button> -->
    </span>
  </el-dialog>
</template>

<script>
  import ImgsUpload from '@/components/imgs-upload'
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          shopId: null,
          id: null,
          configType: null, // 配置类型（1:后台 2:PC端 3:h5端）
          isActivity: 0,
          bsLoginLogoImg: null,
          bsLoginBgImg: null,
          bsCopyrightCn: null,
          bsCopyrightEn: null,
          bsTitleContentCn: null,
          bsTitleContentEn: null,
          bsTitleImg: null,
          bsTopBarIcon: null,
          bsMenuTitleOpenCn: null,
          bsMenuTitleOpenEn: null,
          bsMenuTitleCloseCn: null,
          bsMenuTitleCloseEn: null,
          pcLogoImg: null,
          pcCopyrightCn: null,
          pcCopyrightEn: null,
          pcQrcodeImg: null,
          pcCompanyNameCn: null,
          pcCompanyNameEn: null,
          pcCompanyInfoCn: null,
          pcCompanyInfoEn: null,
          pcTitleContentCn: null,
          pcTitleContentEn: null,
          pcTitleImg: null,
          pcCompanyNameShortCn: null,
          pcCompanyNameShortEn: null,
          pcLogoImgText: null,
          pcWelcomeCn: null,
          pcWelcomeEn: null,
          pcLoginBgImg: null,
          uniLoginLogoImg: null,
          stationLoginLogoImg: null
        },
        dataRule: {}
      }
    },
    components: {
      ImgsUpload
    },
    mounted() {
      this.getShopList()
    },
    methods: {
      getShopList() {
        this.$http({
          url: this.$http.adornUrl('/shop/shopAuditing/list'),
          method: 'get',
        }).then(({ data }) => {
          if (data) {
            this.shopList = data
          }
        })
      },
      init (configType, id) {
        this.dataForm.id = id || 0
        this.dataForm.configType = configType
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl('/sys/webConfig/info/' + this.dataForm.id),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              this.dataForm = data
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (!valid) {
            return
          }

          // 后台配置判断
          if (this.dataForm.configType === 1 || this.dataForm.configType === 4) {
            if (!this.dataForm.shopId && this.dataForm.shopId !== 0) {
              this.errorMsg('请选择关联店铺')
              return
            }
            if (!this.dataForm.bsLoginLogoImg) {
              this.errorMsg(this.$i18n.t('webInfoConfig.loginLogo') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            if (!this.dataForm.bsLoginBgImg) {
              this.errorMsg(this.$i18n.t('webInfoConfig.loginBg') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            if (!this.dataForm.bsCopyrightCn) {
              this.errorMsg(this.$i18n.t('webInfoConfig.bsCopyright') + '-' + this.$i18n.t('webInfoConfig.chinese') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            // if (!this.dataForm.bsCopyrightEn) {
            //   this.errorMsg(this.$i18n.t('webInfoConfig.bsCopyright') + '-' + this.$i18n.t('webInfoConfig.english') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
            //   return
            // }
            if (!this.dataForm.bsTitleContentCn) {
              this.errorMsg(this.$i18n.t('webInfoConfig.bsTitleContent') + '-' + this.$i18n.t('webInfoConfig.chinese') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            // if (!this.dataForm.bsTitleContentEn) {
            //   this.errorMsg(this.$i18n.t('webInfoConfig.bsTitleContent') + '-' + this.$i18n.t('webInfoConfig.english') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
            //   return
            // }
            if (!this.dataForm.bsTitleImg) {
              this.errorMsg(this.$i18n.t('webInfoConfig.bsTitleImg') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            // TopIcon
            if (!this.dataForm.bsTopBarIcon) {
              this.errorMsg(this.$i18n.t('webInfoConfig.TopIcon') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            if (!this.dataForm.bsMenuTitleOpenCn) {
              this.errorMsg(this.$i18n.t('webInfoConfig.bsMenuTitleOpen') + '-' + this.$i18n.t('webInfoConfig.chinese') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            // if (!this.dataForm.bsMenuTitleOpenEn) {
            //   this.errorMsg(this.$i18n.t('webInfoConfig.bsMenuTitleOpen') + '-' + this.$i18n.t('webInfoConfig.english') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
            //   return
            // }
            if (!this.dataForm.bsMenuTitleCloseCn) {
              this.errorMsg(this.$i18n.t('webInfoConfig.bsMenuTitleClose') + '-' + this.$i18n.t('webInfoConfig.chinese') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            // if (!this.dataForm.bsMenuTitleCloseEn) {
            //   this.errorMsg(this.$i18n.t('webInfoConfig.bsMenuTitleClose') + '-' + this.$i18n.t('webInfoConfig.english') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
            //   return
            // }
          }

          // pc端配置判断
          if (this.dataForm.configType === 2) {
            if (!this.dataForm.pcLogoImg) {
              this.errorMsg(this.$i18n.t('webInfoConfig.logo') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            if (!this.dataForm.pcLoginBgImg) {
              this.errorMsg(this.$i18n.t('webInfoConfig.loginBg') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            if (!this.dataForm.pcCopyrightCn) {
              this.errorMsg(this.$i18n.t('webInfoConfig.bsCopyright') + '-' + this.$i18n.t('webInfoConfig.chinese') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            // if (!this.dataForm.pcCopyrightEn) {
            //   this.errorMsg(this.$i18n.t('webInfoConfig.bsCopyright') + '-' + this.$i18n.t('webInfoConfig.english') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
            //   return
            // }
            if (!this.dataForm.pcQrcodeImg) {
              this.errorMsg(this.$i18n.t('webInfoConfig.pcQrcodeImg') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            if (!this.dataForm.pcCompanyNameCn) {
              this.errorMsg(this.$i18n.t('webInfoConfig.pcCompanyName') + '-' + this.$i18n.t('webInfoConfig.chinese') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            // if (!this.dataForm.pcCompanyNameEn) {
            //   this.errorMsg(this.$i18n.t('webInfoConfig.pcCompanyName') + '-' + this.$i18n.t('webInfoConfig.english') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
            //   return
            // }
            if (!this.dataForm.pcCompanyInfoCn) {
              this.errorMsg(this.$i18n.t('webInfoConfig.pcCompanyInfo') + '-' + this.$i18n.t('webInfoConfig.chinese') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            // if (!this.dataForm.pcCompanyInfoEn) {
            //   this.errorMsg(this.$i18n.t('webInfoConfig.pcCompanyInfo') + '-' + this.$i18n.t('webInfoConfig.english') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
            //   return
            // }
            if (!this.dataForm.pcTitleContentCn) {
              this.errorMsg(this.$i18n.t('webInfoConfig.pcTitleContent') + '-' + this.$i18n.t('webInfoConfig.chinese') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            // if (!this.dataForm.pcTitleContentEn) {
            //   this.errorMsg(this.$i18n.t('webInfoConfig.pcTitleContent') + '-' + this.$i18n.t('webInfoConfig.english') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
            //   return
            // }
            if (!this.dataForm.pcTitleImg) {
              this.errorMsg(this.$i18n.t('webInfoConfig.bsTitleImg') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            if (!this.dataForm.pcLogoImgText) {
              this.errorMsg(this.$i18n.t('webInfoConfig.pcLogoImgText') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            if (!this.dataForm.pcWelcomeCn) {
              this.errorMsg(this.$i18n.t('webInfoConfig.pcWelcome') + '-' + this.$i18n.t('webInfoConfig.chinese') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
            // if (!this.dataForm.pcWelcomeEn) {
            //   this.errorMsg(this.$i18n.t('webInfoConfig.pcWelcome') + '-' + this.$i18n.t('webInfoConfig.english') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
            //   return
            // }
          }
          // h5端配置判断
          if (this.dataForm.configType === 3) {
            if (!this.dataForm.uniLoginLogoImg) {
              this.errorMsg(this.$i18n.t('webInfoConfig.loginLogo') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
          }

          // 自提点端配置判断
          if (this.dataForm.configType === 5) {
            if (!this.dataForm.stationLoginLogoImg) {
              this.errorMsg(this.$i18n.t('webInfoConfig.loginLogo') + this.$i18n.t('webInfoConfig.canNotBeEmpty'))
              return
            }
          }
          this.$http({
            url: this.$http.adornUrl('/sys/webConfig/operate'),
            method: this.dataForm.id ? 'put' : 'post',
            data: this.$http.adornData(this.dataForm)
          }).then(({data}) => {
            this.$message({
              message: this.$i18n.t('remindPop.success'),
              type: 'success',
              duration: 1000,
              customClass: 'zZindex',
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
            this.updateWebConfigData()
          })
        })
      },

      errorMsg (message) {
        this.$message({
          message: message,
          type: 'error',
          duration: 1000,
          customClass: 'zZindex'
        })
      },

      // 更新网站配置信息
      updateWebConfigData () {
        if (this.dataForm.configType !== 1) {
          return false
        }
        this.$http({
          url: this.$http.adornUrl('/sys/webConfig/getActivity'),
          method: 'get'
        }).then(({data}) => {
          this.$store.commit('webConfig/addData', data)
        })
      }
    }
  }
</script>

<style scoped>
/* .el-dialog-body .el-dialog__header{
  border-bottom: 1px solid #c0ccda;
}
.el-dialog-body .el-dialog__body {
    height: 650px;
    overflow-y: auto;
}
.el-dialog-body .el-dialog__footer{
  border-top: 1px solid #c0ccda;
}
.zZindex{
  z-index: 9999 !important;
} */
</style>