hfysite/pages/manger/base/index.vue

<script>

import RoundedTitle from "@/components/public/roundedTitle.vue";
import BigTitle from "@/components/public/bigTitle.vue";
import InputRow from "@/components/public/form/inputRow.vue";
import ImageViewer from "@/components/public/imageViewer.vue";
import {FormVerify} from "kind-form-verify";
import {fieldCheck} from "@/until/form/fieldVerify";
import {isEmpty} from "@/until/typeTool";
import {initForm} from "@/until/formTool";
import ImageTable from "@/components/public/imageTable.vue";
import Pop from "@/components/public/pop.vue";
import PopCard from "@/components/public/popCard.vue";
import {apiMap} from "@/map/apiMap";
import {handle} from "@/until/handle";
import {rCode} from "@/map/rcodeMap_esm";


let formVerify = null;
export default {
  name: 'baseSetting',
  components: {
    PopCard, Pop, ImageTable,
    ImageViewer,
    InputRow,
    RoundedTitle,
    BigTitle
  },
  data() {
    return {
      editId: 0,
      form: {
        wx_qrc: {
          val: '',
          init: '',
          msg: '',
          state: 0,
          reCheckField: 'fileData',
        },
        addr: {
          val: '',
          init: '',
          msg: '',
          state: 0,
        },
        tel: {
          val: '',
          init: '',
          msg: '',
          state: 0,
        },
        fax: {
          val: '',
          init: '',
          msg: '',
          state: 0,
        },
        email: {
          val: '',
          init: '',
          msg: '',
          state: 0,
        },
        shop_addr: {
          val: '',
          init: '',
          msg: '',
          state: 0,
          reCheckField: 'url'
        }
      },
      imagePopShow: false,
      imagePopLoading: false,
      imageSelect: {
        type: '',
        param: ''
      },

    }
  },
  beforeMount() {
    formVerify = new FormVerify(
      this.form,
      fieldCheck,
    )
    formVerify.onLog = (msg) => {
      console.log(msg);
    };
    this.fetchData()
  },
  beforeDestroy() {
    formVerify = null;
  },
  methods: {
    initForm(){
      initForm(this.form);
      this.form.wx_qrc.showText = this.form.wx_qrc.val;
      this.$forceUpdate()
    },
    /**
     * 图片路径处理, 兼容手动上传的图片与后期自动增加的图片
     * @param text
     * @return {*|string|string}
     */
    imagePathBabel(text){
      return text?text.charAt(0) == '/'? text : '/public/'+text : ''
    },
    openImageSelect(type, param){
      this.imageSelect = {type, param}
      this.imagePopShow = true;
    },
    selectImageHandle(fileData){
      this.form.wx_qrc.val = fileData.filePath
      this.form.wx_qrc.msg = '';
      this.form.wx_qrc.state = 0;
      this.form.wx_qrc.showText = fileData.filePath
    },
    async onSubmitHandle(){
      if(!formVerify.checkForm(this.form, true)){
        return this.$message.error('表单校验失败')
      }
      let formData = formVerify.getFormData();
      formData.id = this.editId;
      let url = apiMap.baseInfoEdit.path;
      let actionText = '保存';
      let [err,res] = await handle(this.$axios.post(
        url,
        formData
      ));
      if(err){
        console.log(err);
        return this.$message.error(`${actionText}失败`);
      }
      let  result = res.data;
      if (result.code === rCode.OK){
        this.$message.success(`${actionText}成功`);
      }else{
        this.$message.error(`${actionText}失败,${result.msg}`);
      }
    },
    async fetchData(){
      let url = apiMap.baseInfo.path;
      this.loading = true;
      let [err, res] = await handle(this.$axios.get(url));
      this.loading = false;
      if(err){
        this.$message.error('获取基础信息失败');
        return console.log(err);
      }
      let result = res.data;
      if (result.code !== rCode.OK) {
        this.$message.error(`获取产品信息失败,${result.msg}`)
        return
      }
      console.log(result)
      let data = result.data;
      this.editId = data.id;
      this.form.wx_qrc.init = data.wx_qrc;
      this.form.addr.init = data.addr;
      this.form.tel.init = data.tel;
      this.form.fax.init = data.fax;
      this.form.email.init = data.email;
      this.form.shop_addr.init = data.shop_addr;
      this.initForm()

    }
  }
}
</script>

<template>
<div class="manager-con">

  <div class="manager-title">
    <div class="big-title justify-start py-2">
      <span>
        基础信息配置
      </span>
      <div class="hr"></div>
    </div>
  </div>

  <div class="manager-show">

    <input-row class="mt-3"
               :msg="form.tel.msg"
               :label-width="120"
               label="公司电话">
      <a-input class="!w-48 "
               v-model="form.tel.val"
               placeholder="请输入公司电话"></a-input>
    </input-row>
    <input-row class="mt-3"
               :msg="form.fax.msg"
               :label-width="120"
               label="公司传真">
      <a-input class="!w-48 "
               v-model="form.fax.val"
               placeholder="请输入公司传真"></a-input>
    </input-row>
    <input-row class="mt-3"
               :msg="form.email.msg"
               :label-width="120"
               label="公司邮箱">
      <a-input class="!w-48 "
               v-model="form.email.val"
               placeholder="请输入公司邮箱"></a-input>
    </input-row>
    <input-row class="mt-3"
               :msg="form.addr.msg"
               :label-width="120"
               label="公司地址">
      <a-input class="!w-1/2 "
               v-model="form.addr.val"
               placeholder="请输入公司地址"></a-input>
    </input-row>
    <input-row class="mt-3"
               :msg="form.shop_addr.msg"
               :label-width="120"
               label="网店地址">
      <a-input class="!w-1/2 "
               v-model="form.shop_addr.val"
               placeholder="网店的访问链接"></a-input>
    </input-row>
    <input-row class="mt-3"
               :msg="form.wx_qrc.msg"
               :label-width="120"
               label="微信二维码"
               remark="在网站浏览时显示联络用的二维码"
    >
      <div class="rounded relative" style="width: 524px;height: 360px" >
        <image-viewer class="" :src="imagePathBabel(form.wx_qrc.showText)"
                      :alt="form.wx_qrc.showText" ></image-viewer>
        <div class="absolute w-full h-full left-0 top-0
                justify-center text-white bg-gray-400
                items-center text-2xl flex opacity-0 hover:opacity-70"
             @click="openImageSelect()"
        >
          点击选择产品图片
        </div>
      </div>
    </input-row>

    <div class="mt-2">
      <a-button type="primary" @click="onSubmitHandle">
        保存
      </a-button>
    </div>
  </div>

  <!--  图片选择弹窗 -->
  <pop :show="imagePopShow" :loading="imagePopLoading">
    <pop-card>
      <template slot="header">
        <span>选择需要插入的图片</span>
      </template>
      <image-table
        class="w-full h-full"
        @cancel="imagePopShow = false"
        @ok="selectImageHandle">
      </image-table>
    </pop-card>
  </pop>
</div>
</template>

<style scoped>

</style>