ele-usky-admin/src/views/statisManage/operLog/dialogComponent.vue

<template>
  <el-dialog
    :title="dialogTitle"
    v-model="showDialog"
    width="900px"
    @open="open()"
    @close="closeDialog(0)"
  >
    <el-form
      ref="formInfo"
      :model="form"
      class="demo-form-inline"
      label-width="150px"
      :rules="rules"
    >
      <el-row>
        <el-col :span="12" :gutter="20">
          <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>

        </el-col>
        <el-col :span="12" :gutter="20">
           <el-form-item label="请求地址:" prop="phoneNumber">
            <el-input v-model="form.phoneNumber"></el-input>
          </el-form-item>
           <el-form-item label="请求方法:" prop="address">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          
         
        </el-col>
      </el-row>

    
      <el-form-item label="操作方法:" prop="remark">
        <el-input
          v-model="form.remark"
          type="text"
          placeholder="请输入..."
          style="width: 670px"
        />
      </el-form-item>
      <el-form-item label="请求参数:" prop="remark">
        <el-input
          v-model="form.remark"
          type="text"
          placeholder="请输入..."
          style="width: 670px"
        />
      </el-form-item>
      <el-form-item label="返回参数:" prop="remark">
        <el-input
          v-model="form.remark"
          type="text"
          placeholder="请输入..."
          style="width: 670px"
        />
      </el-form-item>

      <el-row>
        <el-col :span="12" :gutter="20">
          <el-form-item label="操作状态:" prop="status">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option label="正常" :value="0"></el-option>
              <el-option label="停用" :value="1"></el-option>
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :span="12" :gutter="20">
           <el-form-item label="操作时间:" prop="phoneNumber">
            <el-input v-model="form.phoneNumber"></el-input>
          </el-form-item>
          <!-- <el-form-item label="有效期限:" prop="tenantTerm">
            <el-radio-group v-model="form.tenantTerm">
              <el-radio :label="3" value="3">2090-01-01</el-radio>
              <el-radio :label="4" value="4">
                <el-date-picker
                  :min-time="nowDate"
                  v-model="form.value1"
                  :disabled-date="disabledDate"
                  type="date"
                  placeholder="请选择日期"
                />
              </el-radio>
            </el-radio-group>
          </el-form-item> -->
          
        </el-col>
      </el-row>
     

      <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-dialog>
</template>
<script>
// 地图
import AMap from 'AMap'
import { useStore } from 'vuex'
import { defineComponent, ref, watchEffect, onMounted } from 'vue'
import * as api from '@/api/tenantManage/tenantUnit.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,
    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 nowDate = ref(new Date().getTime())

    const getPlatformBoxList = ref([])

    const roleValid = (rule, value, callback) => {
      rule
      if (value.length === 0) {
        callback(new Error('角色不能为空'))
      } else {
        callback()
      }
    }

    const disabledDate = (time) => {
      return time.getTime() < Date.now()
    }

    // 保存操作
    const submitForm = () => {
      formInfo.value.validate((valid) => {
        if (valid) {
          var aa = form.value
          if (aa.tenantTerm == 3) {
            aa.tenantTerm = '永久有效'
          }
          if (aa.tenantTerm == 4) {
            if (!form.value.value1) {
              ElMessage.warning('请选择日期')
              return
            }
            aa.tenantTerm = form.value.value1

            parseTime

            aa.tenantTerm
              ? (aa.tenantTerm = parseTime(aa.tenantTerm).substring(0, 10))
              : ''
          }

          if (props.dialogTitle === '新增') {
            api.addTenantData(form.value).then((requset) => {
              if (requset.status === 'SUCCESS') {
                ElMessage.success({
                  message: '新增成功',
                  type: 'success',
                })
                closeDialog()
              } else {
                ElMessage.error(requset.msg)
              }
            })
          } else {
            api.updateTenantData(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 marker = ref([])

    function initMap() {
      // AMap start
      var map = new AMap.Map('mapF', {
        resizeEnable: true,
      })
      //为地图注册click事件获取鼠标点击出的经纬度坐标

      var marker = new AMap.Marker({})
      map.on('click', function (e) {
                form.value.geoPosition = e.lnglat.getLng() + ',' + e.lnglat.getLat()

        map.remove([marker])
        marker = new AMap.Marker({
          position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        })

        map.add([marker])

      })
      // AMap end
    }

    const open = () => {
      // initMap()
      setTimeout(function () {
        initMap()
      }, 10)

      form.value = props.itemInfo
      console.log('form.value')
      console.log(form.value)

      optionselect()
    }

    // 关闭弹框
    const closeDialog = (flag) => {
      resetForm()
      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 {
      pickerEndDate,
      roleValid,
      submitForm,
      closeDialog,
      open,

      // map123,
      store,
      beginTime,
      showDialog,

      initMap,
      nowDate,
      disabledDate,
      marker,

      checked: true,
      form,
      formInfo,
      getPlatformBoxList,

      rules: {
        tenantName: [
          { required: true, message: '请输入租户名称', trigger: 'blur' },
          {
            min: 1,
            max: 30,
            message: '长度在 1 到 30个字符',
            trigger: 'blur',
          },
        ],
        tenantManager: [
          { required: true, message: '请输入租户负责人', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 1 到 10个字符',
            trigger: 'blur',
          },
        ],
        tenantTerm: [
          { required: true, message: '请选择有效期限', trigger: 'change' },
        ],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        geoPosition: [
          { required: true, message: '请选输入地理位置', trigger: 'blur' },
        ],

        tenantType: [
          { required: true, message: '请输入租户类型', trigger: 'blur' },
        ],
        phoneNumber: [
          {
            required: true,
            message: '请输入负责人手机号码',
            trigger: 'blur',
          },
          {
            validator: validatorPhone,
            message: '输入的电话号码不正确',
            trigger: 'blur',
          },
        ],
        systemName: [
          { required: true, message: '请选择系统平台', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },

          {
            validator: isEmail,
            message: '输入的邮箱地址不正确',
            trigger: 'blur',
          },
        ],
        address: [
          { required: true, message: '请输入联系地址', trigger: 'blur' },
          {
            min: 1,
            max: 30,
            message: '长度在 1 到 30个字符',
            trigger: 'blur',
          },
        ],
        domain: [
          { required: true, message: '请输入域名地址', trigger: 'blur' },
          {
            min: 1,
            max: 250,
            message: '长度在 1 到 250个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },
})
</script>
 
<style scoped lang="scss">
.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;
}
</style>
<style>
</style>