ele-usky-admin/src/views/tenantManage/systemConfig/dialogComponent.vue

<template>
  <div class="systemCard">
    <el-dialog
      :title="dialogTitle"
      v-model="showDialog"
      @open="open()"
      @close="closeDialog(0)"
    >
      <el-card class="box-card grid-content">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
        >
          <!-- 常规配置start -->
          <el-tab-pane label="常规配置" name="first">
            <el-form
              ref="formInfo"
              :model="form"
              class="demo-form-inline"
              label-width="150px"
              :rules="rules"
            >
              <el-form-item label="主页标题:" prop="middleTitle">
                <el-input v-model="form.middleTitle"></el-input>
              </el-form-item>
              <el-form-item label="主页logo:" prop="homeLogo">
                <el-input v-model="form.homeLogo"></el-input>
                <el-upload
                ref="upload"
                  :action="uploadUrl"
                  :on-success="handleUpAvatar"
                  :on-remove="handleRemove"
                  list-type="picture"
                  :limit="1"
                  :on-preview="handlePictureCardPreview"
                  :headers="{ accessToken: [accessToken] }"
                  :on-exceed="overLength"
                >
                  <el-button type="primary" style="margin-top: 10px">
                    上传
                  </el-button>
                  <template #tip>
                    <div class="el-upload__tip">图片尺寸：1920*1080</div>
                  </template>
                </el-upload>
              </el-form-item>

              <el-form-item label="首页请求地址:" prop="homePageUrl">
                <el-input v-model="form.homePageUrl"></el-input>
                <!-- <el-select v-model="form.homePageUrl" placeholder="请选择">
                  <el-option label="地址1" :value="1"></el-option>
                  <el-option label="地址2" :value="2"></el-option>
                </el-select> -->
              </el-form-item>

              <el-form-item label="主页导航栏:" prop="homeLayout">
                <el-radio-group v-model="form.homeLayout">
                  <el-radio :label="1" value="1">顶部导航栏</el-radio>
                  <el-radio :label="2" value="2">左侧导航栏</el-radio>
                </el-radio-group>
              </el-form-item>

              <br />

              <div style="text-align: right">
                <el-button @click="closeDialog(0)">取消</el-button>
                <el-button type="primary" @click="submitForm()">保存</el-button>
              </div>
            </el-form>
          </el-tab-pane>
          <!-- 常规配置end -->

          <!-- 登录页配置start -->
          <el-tab-pane label="登录页配置" name="second">
            <el-form
              ref="formInfo2"
              :model="form"
              class="demo-form-inline"
              label-width="150px"
              :rules="rules"
            >
              <el-form-item label="登录页标题:" prop="tenantName">
                <el-input v-model="form.tenantName"></el-input>
              </el-form-item>
              <el-form-item label="登录页logo:" prop="tenantManager">
                <el-input v-model="form.tenantManager"></el-input>
              </el-form-item>
              <el-form-item label="登录页背景:" prop="tenantManager">
                <el-input v-model="form.tenantManager"></el-input>
              </el-form-item>
              <el-form-item label="登录页底部名称:" prop="tenantName">
                <el-input v-model="form.tenantName"></el-input>
              </el-form-item>
              <el-form-item label="标签页图标:" prop="tenantManager">
                <el-input v-model="form.tenantManager"></el-input>
              </el-form-item>
              <br />

              <div style="text-align: right">
                <el-button @click="closeDialog(0)">取消</el-button>
                <el-button type="primary" @click="submitForm()">保存</el-button>
              </div>
            </el-form>
          </el-tab-pane>
          <!-- 修登录页配置end -->

          <!-- 中间页配置start -->
          <el-tab-pane label="中间页配置" name="third">
            <el-form
              ref="formInfo3"
              :model="form"
              class="demo-form-inline"
              label-width="150px"
              :rules="rules"
            >
              <el-form-item label="是否开启中间页:" prop="tenantName">
                <el-switch v-model="value" size="large" />
              </el-form-item>
              <el-form-item label="中间页logo:" prop="tenantManager">
                <el-input v-model="form.tenantManager"></el-input>
              </el-form-item>
              <el-form-item label="中间页背景:" prop="tenantManager">
                <el-input v-model="form.tenantManager"></el-input>
              </el-form-item>
              <el-form-item label="中间页底部名称:" prop="tenantName">
                <el-input v-model="form.tenantName"></el-input>
              </el-form-item>
              <br />

              <div style="text-align: right">
                <el-button @click="closeDialog(0)">取消</el-button>
                <el-button type="primary" @click="submitForm()">保存</el-button>
              </div>
            </el-form>
          </el-tab-pane>
          <!-- 中间页配置end -->

          <!-- 其他配置start -->
          <el-tab-pane label="其他配置" name="forth">
            其他配置设计开发中...
          </el-tab-pane>
          <!-- 其他配置end -->
        </el-tabs>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import {
  defineComponent,
  ref,
  watchEffect,
  onMounted,
  reactive,
  toRefs,
} from 'vue'
import * as api from '@/api/tenantManage/systemConfig.js'
import { ElMessage } from 'element-plus'
// import { parseTime } from '@/utils'
// import { validatorPhone, parseTime, isEmail } from '@/utils'
export default defineComponent({
  name: 'DialogComponent',
  emits: ['closeDialog'],
  props: {
    show_Dialog: Boolean,
    configStatus: Boolean,
    dialogTitle: String,
    itemInfo: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  setup(props, { emit }) {
    const store = useStore()
    const beginTime = ref('')
    const showDialog = ref(false)
    const form = ref({})
    const formInfo = ref(null)
    const value = ref(true)
    const accessToken = ref(store.state.user.accessToken)

    const upload = ref(null);

    const activeName = ref('first')

    const getPlatformBoxList = ref([])

    const dataSet = reactive({
      uploadUrl:
        window.PLATFROM_CONFIG.baseUrl +
        '/patrolInspectionDevice/pictureUpload',
      fileList: [],
    })

    const roleValid = (rule, value, callback) => {
      rule
      if (value.length === 0) {
        callback(new Error('角色不能为空'))
      } else {
        callback()
      }
    }
    const overLength = () => {
      ElMessage.warning('只能上传一张')

    }

    // //上传成功的回调
    function handleUpAvatar(res) {
      console.log('res')
      console.log(res.data)
      form.value.homeLogo = window.PLATFROM_CONFIG.baseUrl +res.data

      console.log(form.value.homeLogo)
    }

   function  handleRemove(){
     form.value.homeLogo = ''

    }

    // 保存操作
    const submitForm = () => {
      formInfo.value.validate((valid) => {
        if (valid) {
          form.value.tenantId = props.itemInfo.tenantId
          if (props.configStatus) {
            alert('已配置修改提交')
            api.updaMiddleConfig(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '修改配置成功',
                  type: 'success',
                })
                closeDialog()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          } else {
            alert('未配置新增提交')
            api.addMiddleConfig(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '新增配置成功',
                  type: 'success',
                })
                closeDialog()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

    const open = () => {
      setTimeout(function () {
        form.value = props.itemInfo
        console.log('子组件中form.value')
        console.log(form.value)
      }, 500)

      optionselect()

      //  alert(props.configStatus)
    }

    // 关闭弹框
    const closeDialog = (flag) => {
      resetForm()
      upload.value.clearFiles();
      showDialog.value = false
      emit('closeDialog', flag)
    }

    function resetForm() {
     
      formInfo.value.resetFields()
    }

    //角色下拉请求
    function optionselect() {
      api.getPlatformBoxList().then((requset) => {
        if (requset.status === 'SUCCESS') {
          getPlatformBoxList.value = requset.data
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    watchEffect((fn, options) => {
      fn, options
      showDialog.value = props.show_Dialog
    })

    //禁止选择以前的时间
    const pickerEndDate = (time) => {
      const timeRange = 1 * 24 * 60 * 60 * 1000
      return time.getTime() <= Date.now() - timeRange * 1
    }

    onMounted(() => {})

    return {
      ...toRefs(dataSet),
      pickerEndDate,
      roleValid,
      submitForm,
      closeDialog,
      open,

      store,
      beginTime,
      showDialog,

      checked: true,
      form,
      formInfo,
      getPlatformBoxList,

      activeName,
      value,
      overLength,
      handleUpAvatar,
      handleRemove,
      accessToken,
      upload,

      rules: {
        middleTitle: [
          { required: true, message: '请输入主页标题', trigger: 'blur' },
          {
            min: 1,
            max: 30,
            message: '长度在 1 到 30个字符',
            trigger: 'blur',
          },
        ],
        homeLogo: [
          { required: true, message: '请输入主页logo', trigger: 'blur' },
        ],
        homePageUrl: [
          { required: true, message: '请输入主页请求地址', trigger: 'blur' },
        ],
        homeLayout: [
          { required: true, message: '请选则主页导航布局', trigger: 'change' },
        ],
      },
    }
  },
})
</script>
 
<style scoped lang="scss">
.el-card {
  --el-card-border-color: var(--el-border-color-light, #fff);
  border: 0px solid red;
}
.el-card.is-always-shadow {
  box-shadow: none;
}
::v-deep .el-card__body {
  padding: 0 !important;
}

::v-deep .el-tabs__header {
  margin-bottom: 30px;
}
.el-input,
.el-select,
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 240px;
}

// .el-form-item {
//   margin: 0 0 20px !important;
// }
// label样式
.el-form-item__label {
  width: 120px !important;
}
.el-form-item__content {
  margin-left: 100px;
}
.demo-form-inline .el-form-item:not(.user-layout .el-form-item) {
  // margin: 0 auto 20px 55px;
}

.el-upload__tip {
  margin-left: 10px;
  display: inline-block;
}
::v-deep .el-upload-list__item{
  width:100px!important
}
</style>
<style>
.systemCard .el-dialog__body {
  padding-top: 10px !important;
}
</style>