dy-admin-manager/src/views/organManager/components/organInfo.vue

<!--  -->
<template>
  <div class="m-core">
    <el-alert
        :title="tenantInfo == 'SETTING' ? '基本信息' : '机构信息'"
        type="info"
        :closable="false"
        style="margin-bottom: 20px"
      ></el-alert>
      <!-- label-position="top" -->
      <el-form ref="form" label-position="top" :model="form" label-width="140px" :inline="true">
        <el-col :span="24">
          <el-form-item label="机构LOGO" prop="logo"
            :rules="[{ required: true, message: '请上传机构LOGO', trigger: 'blur, change' }]">
            <div style="width: 300px !important">
              <el-upload
                class="avatar-uploader"
                action="/api-web/uploadFile"
                accept=".png"
                :headers="headers"
                :show-file-list="false"
                :disabled="isDisabled"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="form.logo" :src="form.logo" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div class="tips" v-show="!isDisabled" style="line-height: 1;color: red;">图片尺寸：72x72；支持的格式：png；</div>
            </div>
          </el-form-item>
          <el-form-item label="主题" v-if="tenantInfo == 'SETTING'" prop="theme" :rules="[{ required: true, message: '请选择主题', trigger: 'change' }]">
            <el-select
              v-model="form.theme"
              :disabled="isDisabled"
              placeholder="请选择主题"
            >
              <el-option label="大雅绿" value="green"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主题色" v-if="tenantInfo == 'SETTING'" prop="themeColor" :rules="[{ required: true, message: '请选择主题色', trigger: 'change' }]">
            <div style="width: 300px !important">
              <!-- <el-color-picker :disabled="isDisabled" v-model="form.themeColor"></el-color-picker> -->
              <!-- <theme-picker  /> -->
              <div class="themeColor">
                <el-tooltip v-for="item in themeList" :key="item.color" effect="dark" :content="item.name" placement="top">
                    <div class="themeColor-block" @click="onSelectTheme(item)" :style="item.style"><i class="el-icon-check" v-show="item.selected"></i></div>
                </el-tooltip>
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-form-item label="公司全称" prop="tsignName"
          :rules="[{ required: true, message: '请输入公司全称', trigger: 'blur' }]">
          <el-input
            v-model.trim="form.tsignName"
            :disabled="isDisabled || tenantInfo == 'SETTING'"
            placeholder="请输入公司全称"
          ></el-input>
        </el-form-item>
        <el-form-item label="营业执照编号" prop="tsignCode"
          :rules="[{ required: true, message: '请输入营业执照编号', trigger: 'blur' }]">
          <el-input
            v-model.trim="form.tsignCode"
            :disabled="isDisabled || tenantInfo == 'SETTING'"
            placeholder="请输入营业执照编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在城市" required>
          <el-form-item prop="province" :rules="[{ required: true, message: '请选择省', trigger: 'change' }]" style="margin-right: 0;">
            <el-select
              v-model.trim="form.province"
              filterable
              placeholder="请选择省"
              :disabled="isDisabled"
              clearable
              style="width: 148px !important;"
              @change="onChangeProvince"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="city" :rules="[{ required: true, message: '请选择市', trigger: 'change' }]">
            <el-select
              v-model.trim="form.city"
              filterable
              :disabled="isDisabled"
              style="width: 148px !important;"
              placeholder="请选择市"
              clearable
            >
              <el-option
                v-for="item in cityList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label="机构简称" prop="name"
          :rules="[{ required: true, message: '请输入机构简称', trigger: 'blur' }]">
          <el-input
            v-model.trim="form.name"
            :disabled="isDisabled"
            :max="8"
            :maxlength="8"
            placeholder="请输入机构简称(最多8个字)"
          ></el-input>
        </el-form-item>
        <el-form-item label="机构联系人" prop="contacts"
          :rules="[{ required: true, message: '请输入机构联系人', trigger: 'blur' }]">
          <el-input
            v-model.trim="form.contacts"
            :disabled="isDisabled"
            placeholder="请输入机构联系人"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人手机号" prop="phone"
          :rules="[{ required: true, message: '请输入联系人手机号', trigger: 'blur' },
            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }]">
          <el-input
            v-model.trim="form.phone"
            :max="11"
            :disabled="isDisabled"
            type="number"
            oninput="if(value.length > 11)value=value.slice(0, 11)"
            style="width: 187px"
            placeholder="请输入联系人手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="机构邮箱" prop="email"
          :rules="[{ required: true, message: '请输入机构邮箱', trigger: 'blur' },
            { pattern: /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/, message: '请输入正确的邮箱格式', trigger: 'blur' }]">
          <el-input
            v-model.trim="form.email"
            :disabled="isDisabled"
            placeholder="请输入机构邮箱"
          ></el-input>
        </el-form-item>
        <!--  -->
        <el-form-item label="机构客服电话" prop="customerServicePhone">
          <el-input
            v-model.trim="form.customerServicePhone"
            type="number"
            :disabled="isDisabled"
            placeholder="请输入机构客服电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="机构地址" prop="address">
          <el-input
            v-model.trim="form.address"
            :disabled="isDisabled"
            placeholder="请输入机构地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="机构简介" prop="remark">
          <el-input
            type="textarea"
            show-word-limit
            :max="200"
            :disabled="isDisabled"
            v-model.trim="form.remark"
          ></el-input>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  areaQueryChild,
  getParentArea,
} from "@/api/specialSetting";
import ThemePicker from '@/components/ThemePicker'
export default {
  props: ['type', 'data', 'tenantInfo'],
  components: { ThemePicker },
  data () {
    return {
      headers: {
        Authorization: getToken(),
      },
      themeList: [{
        selected: true,
        name: '大雅绿（默认）',
        color: '#14928a',
        style: 'background-color: #14928a'
      }, {
        selected: false,
        name: '拂晓蓝',
        color: '#1890ff',
        style: 'background-color: #1890ff'
      }, {
        selected: false,
        name: '薄暮',
        color: '#f5222d',
        style: 'background-color: #f5222d'
      }, {
        selected: false,
        name: '火山',
        color: '#fa541c',
        style: 'background-color: #fa541c'
      }, {
        selected: false,
        name: '日暮',
        color: '#faad14',
        style: 'background-color: #faad14'
      }, {
        selected: false,
        name: '明青',
        color: '#13c2c2',
        style: 'background-color: #13c2c2'
      }, {
        selected: false,
        name: '极客蓝',
        color: '#2f54eb',
        style: 'background-color: #2f54eb'
      }, {
        selected: false,
        name: '酱紫',
        color: '#722ed1',
        style: 'background-color: #722ed1'
      }],
      form: {
        tsignName: null,
        tsignCode: null,
        logo: null,
        name: null,
        contacts: null,
        province: null,
        city: null, // 分部编号
        phone: null,
        email: null,
        address: null,
        customerServicePhone: null,
        remark: null,
        theme: 'green',
        themeColor: '#14928a'
      },
      payState: null,
      imageWidthM: 72,
      imageHeightM: 72,
      provinceList: [],
      cityList: []
    };
  },
  async mounted () {
    await this.getAreaList()
    if(this.data) {
      this.form = { ...this.data }
      this.payState = this.data.payState
    }
    // 选中默认颜色
    this.themeList.forEach(theme => {
      if(theme.color == this.form.themeColor) {
        theme.selected = true
      } else {
        theme.selected = false
      }
    })
    // 判断是否有城市编号
    if(this.form.areaId) {
      await getParentArea({ id: this.form.areaId }).then(async (res) => {
        if (res.code == 200 && res.data) {
          await this.getAreaList(res.data.id, () => {
            this.$set(this.form, "province", res.data.id);
            this.$set(this.form, "city", this.form.areaId);
          });
            this.branchStatus = true;
        }
      });
    } else {
      this.$set(this.form, "province", null);
      this.$set(this.form, "city", null);
    }

    this.$refs.form.clearValidate()
  },
  computed: {
    isDisabled() {
      // console.log(this.payState)
      if(this.tenantInfo == 'SETTING') {
        return false
      } else {
        return this.type == 'setting' || this.payState == 1  ? true : false
      }
    }
  },
  methods: {
    onSelectTheme(item) {
      this.themeList.forEach(theme => {
        theme.selected = false
      })
      item.selected = true
      this.form.themeColor = item.color
    },
    onSubmit() {
      let state = false
      this.$refs.form.validate(_ => {
        state = _
      })
      return state
    },
    onChangeProvince(val) {
      this.form.city = null;
      this.getAreaList(val);
    },
    getAreaList(parentId, callback) {
      parentId = parentId ? parentId : 0;
      areaQueryChild({ parentId: parentId }).then((res) => {
        if (res.code == 200 && res.data) {
          let tempData = [];
          res.data.forEach((item) => {
            tempData.push({
              label: item.name,
              value: item.id,
            });
          });
          if (parentId) {
            this.cityList = tempData;
          } else {
            this.provinceList = tempData;
          }

          if (callback && typeof callback == "function") {
            callback();
          }
        }
      });
    },
    getValues() { // 获取数据
      this.form.areaId = this.form.city;
      return this.form
    },
    handleAvatarSuccess(res) {
      this.form.logo = res.data.url;
    },
    beforeAvatarUpload(file) {
      const imageType = {
        "image/png": true
      };
      const isImage = imageType[file.type];
      const isLt2M = file.size / 1024 / 1024 < 2;
      const imageWidth = this.imageWidthM;
      const imageHeigh = this.imageHeightM;
      const _URL = window.URL || window.webkitURL;
      const isSize = new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = function () {
          if (imageWidth && imageHeigh) {
            this.width === imageWidth && this.height === imageHeigh
              ? resolve()
              : reject(`请上传${imageWidth}x${imageHeigh}尺寸图片`);
          } else if (imageWidth && !imageHeigh) {
            this.width === imageWidth
              ? resolve()
              : reject(`请上传宽为${imageWidth}的图片`);
          } else if (!imageWidth && imageHeigh) {
            this.height === imageHeigh
              ? resolve()
              : reject(`请上传高为${imageHeigh}的图片`);
          } else {
            resolve();
          }
        };
        img.src = _URL.createObjectURL(file);
      }).then(
        () => {
          return file;
        },
        (src) => {
          this.$message.error(src);
          this.uploadImgLoading = false;
          return Promise.reject();
        }
      );
      if (!isImage) {
        this.$message.error("只能上传图片格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isImage && isLt2M && isSize;
    },
  },
};
</script>
<style lang='scss' scoped>
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #e7e7e7;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 72px;
  height: 72px;
  line-height: 72px;
  text-align: center;
}

.el-input, .el-select, .el-textarea {
  width: 300px !important;
}
.avatar {
  width: 72px;
  height: 72px;
  display: block;
}
.themeColor-block {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  overflow: hidden;
  .el-icon-check {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 21px;
    color: white;
  }
}
.themeColor-block + .themeColor-block {
  margin-left: 8px;
}
</style>