tourism_merchant_ui/src/views/tourism/scenicAreaManagement/contentManagement/tabelBox/attractionInfoBeas.vue

<template>
    <div 
    style="padding: 40px;"
    v-loading="loading"
    :element-loading-text="loadingText"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <el-form :model="form" ref="form" size="small" :rules="rules" label-width="120px">
          <el-form-item label="景区名称" prop="scenicName">
            <el-input
              v-model="form.scenicName"
              placeholder="请输入景区名称"
              clearable
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="开放时间" prop="developDate">
            <el-input
              v-model="form.developDate"
              placeholder="请输入开放时间"
              clearable
              style="width: 300px"
              maxlength="200" 
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="联系电话" prop="scenicPhone">
            <el-input
              v-model="form.scenicPhone"
              placeholder="请输入联系电话"
              clearable
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="景区地址" prop="scenicAddress">
            <el-input
              v-model="form.scenicAddress"
              placeholder="请输入景区地址"
              clearable
              style="width: 300px"
            />
          </el-form-item>
          <div style="display: flex;">
            <el-form-item label="经度" prop="longitude">
                <el-input
                v-model="form.longitude"
                placeholder="请输入经度"
                clearable
                style="width: 300px"
                readonly
                />
            </el-form-item>
            <el-form-item label="纬度" prop="latitude">
                
                <el-input
                v-model="form.latitude"
                placeholder="请输入纬度"
                clearable
                style="width: 300px"
                readonly
                />
            </el-form-item>   
          </div>
          <div style="width: 100%;height: 300px;">
            <qqMapBox ref="qqMapBox" @setDot="setDot" />
          </div>
          <el-form-item style="margin-top: 15px;">
            <el-button
                type="primary"
                @click="submitForm"
                :loading="loading"
                element-loading-text="提交中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                v-hasPermi="configPermi.save"
            > 
                {{ loading ? '提交中...' : '保存' }}
            </el-button>
          </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { 
  getTableDeatilsByIdApi,
  updateTableApi,
 } from '@/api/CURD'
 import qqMapBox from '@/myComponents/qqMap.vue'
export default {
  name: "AttractionInfoBeas",
  dicts: [],
  components: {qqMapBox},
  data() {
    return {
        title: "基本信息",// 通用标题
        loading: false,
        loadingText: "拼命加载数据中...",
        configPermi: {
            save: ['contentManagement:attractionInfoBeas:save'], // 保存
        },
        configUrl: {
            details: '/merchant/merchantInfo/getMerchantInfo', // 详情地址
            edit: '/merchant/merchantInfo/updateScenic', // 编辑地址
        },
        form: {},
        rules: {
            scenicName: [{ required: true, message: "请输入标题名称", trigger: ["change","blur"] }],
            developDate: [{ required: true, message: "请选择开放时间", trigger: ["change","blur"] }],
            scenicPhone: [{ required: true, message: "请输入联系电话", trigger: ["change","blur"] }],
            scenicAddress: [{ required: true, message: "请输入景区地址", trigger: ["change","blur"] }],
            longitude: [{ required: true, message: "请输入经度", trigger: ["change","blur"] }],
            latitude: [{ required: true, message: "请输入纬度", trigger: ["change","blur"] }],
        },
    }
  },
  methods: {
    /**  初始化  */
    initData() {
        this.loadingText = "拼命加载数据中..."
        this.loading = true
        this.getTableDeatilsFun()
    },
    /** 获取详情 */
    async getTableDeatilsFun(row) {
      this.loading = true
      try {
        let res = await getTableDeatilsByIdApi(this.configUrl.details,{})
        if(res.code == 200) {
          let obj = {
          ...res.data
        }
          this.$set(this,'form',JSON.parse(JSON.stringify(obj)))
          this.formStatus = 1
          this.$nextTick(()=>{
            if(this.form.longitude&&this.form.latitude){
              console.log("dsfasfdasdfasdfadsfads")
              this.$refs.qqMapBox.setMakerLayer({
                height: 0,
                lat: this.form.latitude,
                lng: this.form.longitude,
              },true)
            }
            
          })
          
        }else {
          this.$message.error('获取详情失败!!!');
          this.formStatus = 2
          this.loading = false
          this.open = false;
        }
        this.$nextTick(()=>{
            this.reset()
        })
        this.loading = false
      } catch (error) {
        console.error('获取详情失败!!!!',error)
        this.formStatus = 2
        this.loading = false
        this.open = false;
      }
    },
    /**
     * 保存
     * @date 2023-11-22
     * @returns {any}
     */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loadingText = "提交数据中..."
          this.loading = true
          updateTableApi(
            this.configUrl.edit,{
            ...this.form
            }).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.loading = false
            this.initData()
            }).catch(()=>{
            this.$message.error("修改失败!!!");
            this.loading = false
        })
        }
      });
    },
    /**
     * 重置
     * @date 2023-11-22
     * @returns {any}
     */
    reset() {
      if(this.$refs["form"]) {
        this.$refs["form"].clearValidate();
      }
    },
    setDot(params){
      this.$set(this.form,'longitude',params.lng)
      this.$set(this.form,'latitude',params.lat)
    }
  },
}
</script>
<style lang="scss" scoped>
</style>