更新

package.json

@@ -49,6 +49,7 @@
     "vue-amap": "^0.5.10",
     "vue-awesome-swiper": "^4.1.1",
     "vue-count-to": "^1.0.13",
+    "vue-cropper": "^0.5.8",
     "vue-drag-resize": "^1.5.4",
     "vue-lunar-calendar-pro": "^1.0.14",
     "vue-qr": "^2.2.1",

src/api/appTenant.js

@@ -153,3 +153,12 @@ export function queryEmployeeByRole(data) {
     params: data
   })
 }
+
+// 上传图片
+export function uploadFile(data) {
+  return request({
+    method: 'post',
+    url: '/api-web/uploadFile',
+    data
+  })
+}

src/components/ImageCropper/CropperModal.vue

@@ -0,0 +1,142 @@
+<template>
+    <el-dialog :visible.sync="visible" :title="options.title" :close-on-click-modal="false" width="800" @close="cancelHandel">
+        <el-row>
+            <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+                <vue-cropper ref="cropper" :img="options.img" :info="true" :autoCrop="options.autoCrop" :autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCropHeight" :fixedBox="options.fixedBox" @realTime="realTime">
+                </vue-cropper>
+            </el-col>
+            <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+                <div :class="options.previewsCircle ? 'avatar-upload-preview' : 'avatar-upload-preview_range'">
+                    <img :src="previews.url" :style="previews.img" />
+                </div>
+            </el-col>
+        </el-row>
+        <template slot="footer">
+            <el-button size="mini" @click="cancelHandel">取消</el-button>
+            <el-button size="mini" type="primary" :loading="confirmLoading" @click="okHandel">保存</el-button>
+        </template>
+    </el-dialog>
+</template>
+<script>
+import { VueCropper } from 'vue-cropper'
+import { uploadFile } from '@/api/appTenant'
+export default {
+  name: 'CropperModal',
+  components: {
+    VueCropper
+  },
+  props: {
+    //图片存储在oss上的上级目录名
+    imgType: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      img: null,
+      confirmLoading: false,
+
+      options: {
+        img: '', //裁剪图片的地址
+        autoCrop: true, //是否默认生成截图框
+        autoCropWidth: 180, //默认生成截图框宽度
+        autoCropHeight: 180, //默认生成截图框高度
+        fixedBox: true, //是否固定截图框大小 不允许改变
+        previewsCircle: true, //预览图是否是原圆形
+        title: '修改头像'
+      },
+      previews: {},
+      url: {
+        upload: '/sys/common/saveToImgByStr'
+      }
+    }
+  },
+
+  methods: {
+    edit(record) {
+      const { options } = this
+      this.visible = true
+      this.options = Object.assign({}, options, record)
+    },
+    /**
+     * 取消截图
+     */
+    cancelHandel() {
+      this.confirmLoading = false
+      this.visible = false
+      this.$emit('cropper-no')
+    },
+    /**
+     * 确认截图
+     */
+    okHandel() {
+      const that = this
+      that.confirmLoading = true
+      // 获取截图的base64 数据
+      this.$refs.cropper.getCropBlob(async (data) => {
+        let form = new FormData()
+        let file = this.blobToFile(data, 'filename.jpg')
+	      form.append('img_file', file)
+        console.log(data, 'blob', form)
+        try {
+          const res = await uploadFile({ file: form })
+          console.log(res)
+          that.$emit('cropper-ok', res)
+        } catch(err) {
+          that.$message.error(err)
+        } finally {
+          that.cancelHandel()
+        }
+        // UpPic({
+        //   img_type: this.imgType,
+        //   img_byte: data
+        // })
+        //   .then(res => {
+        //     that.$emit('cropper-ok', res)
+        //   })
+        //   .catch(err => {
+        //     that.$message.error(err)
+        //   })
+        //   .finally(() => {
+        //     that.cancelHandel()
+        //   })
+      })
+    },
+    //转成blob
+    blobToFile(Blob, fileName) {  //兼容IE
+      Blob.lastModifiedDate = new Date()
+      Blob.name = fileName
+      return Blob
+    },
+    //移动框的事件
+    realTime(data) {
+      this.previews = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.avatar-upload-preview_range,
+.avatar-upload-preview {
+  position: absolute;
+  top: 50%;
+  transform: translate(50%, -50%);
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
+  img {
+    background-color: red;
+    height: 100%;
+  }
+}
+.avatar-upload-preview_range {
+  border-radius: 0;
+}
+</style>
+
+

src/components/ImageCropper/index.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="ant-upload-preview">
+        <div style="width: 100%">
+            <el-upload class="avatar-uploader" :show-file-list="false" action :before-upload="beforeUpload" :http-request="handleChange">
+                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+                <span v-else>
+                    <i v-if="loading" class="el-icon-loading avatar-uploader-icon"></i>
+                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                    <span class="upload-desc">添加上传图片</span>
+                </span>
+            </el-upload>
+        </div>
+        <!-- modal -->
+        <cropper-modal ref="CropperModal" :imgType="imgType" @cropper-no="handleCropperClose" @cropper-ok="handleCropperSuccess"></cropper-modal>
+    </div>
+</template>
+<script>
+import CropperModal from './CropperModal'
+export default {
+  name: 'ImageCropper',
+  components: {
+    CropperModal
+  },
+  props: {
+    //图片裁切配置
+    options: {
+      type: Object,
+      default: function() {
+        return {
+          autoCrop: true, //是否默认生成截图框
+          autoCropWidth: 72, //默认生成截图框宽度
+          autoCropHeight: 72, //默认生成截图框高度
+          fixedBox: false, //是否固定截图框大小 不允许改变
+          previewsCircle: true, //预览图是否是原圆形
+          title: '修改头像'
+        }
+      }
+    },
+    // 上传图片的大小，单位M
+    imgSize: {
+      type: Number,
+      default: 2
+    },
+    //图片存储在oss上的上级目录名
+    imgType: {
+      type: String,
+      default: ''
+    },
+    // 图片地址
+    imageUrl: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      isStopRun: false
+    }
+  },
+
+  methods: {
+    //从本地选择文件
+    handleChange(info) {
+      if (this.isStopRun) {
+        return
+      }
+      this.loading = true
+      const { options } = this
+      console.log(info)
+      this.getBase64(info.file, imageUrl => {
+        const target = Object.assign({}, options, {
+          img: imageUrl
+        })
+        this.$refs.CropperModal.edit(target)
+      })
+    },
+    // 上传之前 格式与大小校验
+    beforeUpload(file) {
+      this.isStopRun = false
+      var fileType = file.type
+      if (fileType.indexOf('image') < 0) {
+        this.$message.warning('请上传图片')
+        this.isStopRun = true
+        return false
+      }
+      const isJpgOrPng =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/png' ||
+        file.type === 'image/jpg'
+      if (!isJpgOrPng) {
+        this.$message.error('你上传图片格式不正确!')
+        this.isStopRun = true
+      }
+      const isLtSize = file.size < this.imgSize * 1024 * 1024
+      if (!isLtSize) {
+        this.$message.error('图片大小不能超过' + this.imgSize + 'MB!')
+        this.isStopRun = true
+      }
+      return isJpgOrPng && isLtSize
+    },
+    //获取服务器返回的地址
+    handleCropperSuccess(data) {
+      //将返回的数据回显
+      this.loading = false
+      this.$emit('crop-upload-success', data)
+    },
+    // 取消上传
+    handleCropperClose() {
+      this.loading = false
+      this.$emit('crop-upload-close')
+    },
+    getBase64(img, callback) {
+      const reader = new FileReader()
+      reader.addEventListener('load', () => callback(reader.result))
+      reader.readAsDataURL(img)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ant-upload-preview {
+  background-color: #fff;
+  .avatar-uploader {
+    .upload-desc {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      color: #ccc;
+      font-size: 8px;
+      right: 0;
+    }
+  }
+}
+::v-deep .avatar-uploader .el-upload--text {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  margin-right: 20px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+::v-deep .avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+::v-deep .avatar-uploader-icon {
+  font-size: 22px;
+  color: #ccc;
+  width: 108px;
+  height: 108px;
+  line-height: 108px;
+  text-align: center;
+}
+::v-deep.avatar {
+  width: 108px;
+  height: 108px;
+  display: block;
+}
+</style>
+
+

src/components/serviceRemind/index.vue

@@ -75,7 +75,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["tenantInfo"])
+    ...mapGetters(["tenantInfo", "baseTenantId"])
   },
   watch: {
     "$route"(){
@@ -95,7 +95,8 @@ export default {
       const { path, query } = this.$route
       const tenantInfo = this.tenantInfo
       const tenantRenewStatus = sessionStorage.getItem('tenantRenewStatus')
-      if(tenantRenewStatus) {
+      // 判断是否是平台的
+      if(tenantRenewStatus || this.baseTenantId <= 0) {
         this.dialogFormVisible = false
       } else {
         this.tInfo = { ...tenantInfo }

src/store/getters.js

@@ -1,6 +1,7 @@
 const getters = {
   sidebar: state => state.app.sidebar,
   tenantInfo: state => state.app.tenantInfo,
+  baseTenantId: state => state.user.baseTenantId,
   device: state => state.app.device,
   token: state => state.user.token,
   avatar: state => state.user.avatar,

src/store/modules/user.js

@@ -14,7 +14,8 @@ const state = {
   phone: '',
   isSuperAdmin:false,
   roles:[],
-  tenantId: null
+  tenantId: null,
+  baseTenantId: null,
 }
 
 let stateTenantId = null // 机构编号
@@ -56,6 +57,9 @@ const mutations = {
   SET_POSITIONNAME:(state,positionName)=>{
     state.positionName = positionName
   },
+  SET_BASETENANTID:(state,baseTenantId)=>{
+    state.baseTenantId = baseTenantId
+  },
 }
 
 async function tenantQueryPage(id) {
@@ -130,6 +134,8 @@ const actions = {
           const roles = data.data.roles
           const tenantId = data.data.tenantId
           const positionName = data.data.positionName
+          sessionStorage.setItem('baseTenantId', tenantId)
+          commit('SET_BASETENANTID', tenantId)
           let tenantConfig = sessionStorage.getItem('tenantConfig')
           tenantConfig = tenantConfig ? JSON.parse(tenantConfig) : {}
           if(tenantConfig.tenantStatus != 'on') {
@@ -144,7 +150,6 @@ const actions = {
             setTheme({ theme, themeColor })
           }
           commit('SET_TENANTID', stateTenantId)
-          sessionStorage.setItem('baseTenantId', tenantId)
           commit('SET_NAME', username)
           commit('SET_AVATAR', avatar)
           commit('SET_ORGAN', organ)

src/utils/auth.js

@@ -40,6 +40,7 @@ export function removeToken () {
 
 export function removeTenant() {
   // 移除跟机构相关信息
+  sessionStorage.removeItem('tenantRenewStatus')
   sessionStorage.removeItem('tenantConfig')
   sessionStorage.removeItem('baseTenantId')
 }

src/views/categroyManager/insideSetting/staffPlatManager.vue

@@ -332,7 +332,7 @@
           type="info"
         >
         </el-alert>
-        <el-row>
+        <!-- <el-row>
           <el-col :span="24">
             <el-form-item
               label="所属分部"
@@ -356,7 +356,7 @@
               </select-all>
             </el-form-item>
           </el-col>
-        </el-row>
+        </el-row> -->
         <el-row>
           <el-col :span="24">
             <el-form-item

src/views/organManager/components/organInfo.vue

@@ -2,229 +2,322 @@
 <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="机构简介" prop="remark">
-            <el-input
-              type="textarea"
-              show-word-limit
-              :max="200"
-              :disabled="isDisabled"
-              v-model.trim="form.remark"
-              placeholder="请输入机构简介"
-            ></el-input>
-          </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"
+      :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"
-              placeholder="请选择主题"
-              @change="themeChange"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
             >
-              <el-option v-for="item in themeList" :key="item.color" :label="item.name" :value="item.value"></el-option>
-            </el-select>
-          </el-form-item> -->
-          <el-form-item label="主题" v-if="tenantInfo == 'SETTING'" prop="theme" :rules="[{ required: true, message: '请选择主题', trigger: 'change' }]">
-            <div style="width: 300px !important">
-              <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="themeChange(item)" :style="{ backgroundColor: item.color }"><i class="el-icon-check" v-show="item.selected"></i></div>
-                </el-tooltip>
-              </div>
+              <img v-if="form.logo" :src="form.logo" class="avatar" />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <!-- <image-cropper :options="cropperOptions" :imgSize="3" :imgType="imgType" :imageUrl="imgUrl" @crop-upload-close="cropClose" @crop-upload-success="cropSuccess" /> -->
+            <div
+              class="tips"
+              v-show="!isDisabled"
+              style="line-height: 1;color: red;"
+            >
+              仅支持图片尺寸：72x72；格式：png；
             </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>
+          </div>
         </el-form-item>
-        <el-form-item label="机构简称" prop="name"
-          :rules="[{ required: true, message: '请输入机构简称', trigger: 'blur' }]">
+        <el-form-item label="机构简介" prop="remark">
           <el-input
-            v-model.trim="form.name"
+            type="textarea"
+            show-word-limit
+            :max="200"
             :disabled="isDisabled"
-            :max="8"
-            :maxlength="8"
-            placeholder="请输入机构简称(最多8个字)"
+            v-model.trim="form.remark"
+            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-form-item label="主题" v-if="tenantInfo == 'SETTING'" prop="theme" :rules="[{ required: true, message: '请选择主题', trigger: 'change' }]">
             <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' }]" style="margin-right: 0;">
-            <el-select
-              v-model.trim="form.city"
-              filterable
+              v-model="form.theme"
               :disabled="isDisabled"
-              style="width: 148px !important;"
-              placeholder="请选择市"
-              clearable
+              placeholder="请选择主题"
+              @change="themeChange"
             >
-              <el-option
-                v-for="item in cityList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              ></el-option>
+              <el-option v-for="item in themeList" :key="item.color" :label="item.name" :value="item.value"></el-option>
             </el-select>
-          </el-form-item>
+          </el-form-item> -->
+        <el-form-item
+          label="主题"
+          v-if="tenantInfo == 'SETTING'"
+          prop="theme"
+          :rules="[
+            { required: true, message: '请选择主题', trigger: 'change' }
+          ]"
+        >
+          <div style="width: 300px !important">
+            <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="themeChange(item)"
+                  :style="{ backgroundColor: item.color }"
+                >
+                  <i class="el-icon-check" v-show="item.selected"></i>
+                </div>
+              </el-tooltip>
+            </div>
+          </div>
         </el-form-item>
-        <el-form-item label="机构地址" prop="address">
-          <el-input
-            v-model.trim="form.address"
+      </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="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="所在城市" 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"
-            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>
+            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 label="机构联系人" prop="contacts"
-          :rules="[{ required: true, message: '请输入机构联系人', trigger: 'blur' }]">
-          <el-input
-            v-model.trim="form.contacts"
+        <el-form-item
+          prop="city"
+          :rules="[{ required: true, message: '请选择市', trigger: 'change' }]"
+          style="margin-right: 0;"
+        >
+          <el-select
+            v-model.trim="form.city"
+            filterable
             :disabled="isDisabled"
-            placeholder="请输入机构联系人"
-          ></el-input>
+            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 label="联系人手机号" prop="phone"
-          :error="errorPhone"
-          :rules="[{ required: true, message: '请输入联系人手机号', trigger: 'blur' },
-            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
-            { validator: validatePhone, trigger: 'blur'}]">
-          <template #label>
-            联系人手机号
-            <el-tooltip placement="top"  popper-class="mTooltip">
+      </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="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="机构联系人"
+        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"
+        :error="errorPhone"
+        :rules="[
+          { required: true, message: '请输入联系人手机号', trigger: 'blur' },
+          {
+            pattern: /^1[3456789]\d{9}$/,
+            message: '请输入正确的手机号',
+            trigger: 'blur'
+          },
+          { validator: validatePhone, trigger: 'blur' }
+        ]"
+      >
+        <template #label>
+          联系人手机号
+          <el-tooltip placement="top" popper-class="mTooltip">
             <div slot="content">
               该手机号为机构管理员登录账号
             </div>
-            <i class="el-icon-question micon el-tooltip"
+            <i
+              class="el-icon-question micon el-tooltip"
               style="font-size: 18px; color: #F56C6C"
-              v-permission="'export/teacherSalary'"></i>
+              v-permission="'export/teacherSalary'"
+            ></i>
           </el-tooltip>
-          </template>
-          <el-input
-            v-model.trim="form.phone"
-            :max="11"
-            :disabled="isDisabled"
-            type="number"
-            oninput="if(value.length > 11)value=value.slice(0, 11)"
-            @blur="checkPhone"
-            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"
-            maxlength="13"
-            minlength="11"
-            :disabled="isDisabled"
-            placeholder="请输入机构客服电话"
-          ></el-input>
-        </el-form-item>
-      </el-form>
+        </template>
+        <el-input
+          v-model.trim="form.phone"
+          :max="11"
+          :disabled="isDisabled"
+          type="number"
+          oninput="if(value.length > 11)value=value.slice(0, 11)"
+          @blur="checkPhone"
+          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"
+          maxlength="13"
+          minlength="11"
+          :disabled="isDisabled"
+          placeholder="请输入机构客服电话"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+
   </div>
 </template>
 
 <script>
 import { getToken } from "@/utils/auth";
 import { checkStudentPhone } from "../api";
-import {
-  areaQueryChild,
-  getParentArea,
-} from "@/api/specialSetting";
-import ThemePicker from '@/components/ThemePicker'
-import { setTheme } from '@/utils/setTheme'
+import { areaQueryChild, getParentArea } from "@/api/specialSetting";
+import ThemePicker from "@/components/ThemePicker";
+import { setTheme } from "@/utils/setTheme";
+import ImageCropper from '@/components/ImageCropper'
 export default {
-  props: ['type', 'data', 'tenantInfo'],
-  components: { ThemePicker },
-  data () {
+  props: ["type", "data", "tenantInfo"],
+  components: { ThemePicker, ImageCropper },
+  data() {
     return {
       headers: {
-        Authorization: getToken(),
+        Authorization: getToken()
       },
-      themeList: [{
-        name: "亚丁绿",
-        value: "adenGreen",
-        color: "#00A79D",
-        selected: false,
-      }, {
-        name: "暮云灰",
-        value: "cloudAshes",
-        color: "#444D5C",
-        selected: false,
-      }, {
-        name: "柏林蓝",
-        value: "berlinBlue",
-        color: "#2B78CC",
-        selected: false,
-      }, {
-        name: "火山红",
-        value: "volcanicRed",
-        color: "#BC3030",
-        selected: false,
-      }],
+      themeList: [
+        {
+          name: "亚丁绿",
+          value: "adenGreen",
+          color: "#00A79D",
+          selected: false
+        },
+        {
+          name: "暮云灰",
+          value: "cloudAshes",
+          color: "#444D5C",
+          selected: false
+        },
+        {
+          name: "柏林蓝",
+          value: "berlinBlue",
+          color: "#2B78CC",
+          selected: false
+        },
+        {
+          name: "火山红",
+          value: "volcanicRed",
+          color: "#BC3030",
+          selected: false
+        }
+      ],
       form: {
         tsignName: null,
         tsignCode: null,
@@ -238,40 +331,50 @@ export default {
         address: null,
         customerServicePhone: null,
         remark: null,
-        theme: 'adenGreen',
-        themeColor: '#00A79D'
+        theme: "adenGreen",
+        themeColor: "#00A79D"
       },
       errorPhone: null, // 手机号存在错误信息
       payState: null,
       imageWidthM: 72,
       imageHeightM: 72,
       provinceList: [],
-      cityList: []
+      cityList: [],
+      cropperOptions: {
+        autoCrop: true, //是否默认生成截图框
+        autoCropWidth: 200, //默认生成截图框宽度
+        autoCropHeight: 200, //默认生成截图框高度
+        fixedBox: false, //是否固定截图框大小 不允许改变
+        previewsCircle: false, //预览图是否是圆形
+        title: '上传广告图片' //模态框上显示的标题
+      },
+      imgType: 'testUp', //图片存储在oss上的上级目录名
+      imgUrl: '', //上传图片所得到的地址
     };
   },
-  async mounted () {
-    await this.getAreaList()
-    if(this.data) {
-      this.form = { ...this.data }
-      this.payState = this.data.payState
+  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
+      if (theme.color == this.form.themeColor) {
+        theme.selected = true;
       } else {
-        theme.selected = false
+        theme.selected = false;
       }
-    })
+    });
     // 判断是否有城市编号
-    if(this.form.areaId) {
-      await getParentArea({ id: this.form.areaId }).then(async (res) => {
+    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;
+          this.branchStatus = true;
         }
       });
     } else {
@@ -279,61 +382,70 @@ export default {
       this.$set(this.form, "city", null);
     }
 
-    this.$refs.form.clearValidate()
+    this.$refs.form.clearValidate();
   },
   computed: {
     isDisabled() {
       // console.log(this.payState)
-      if(this.tenantInfo == 'SETTING') {
-        return false
+      if (this.tenantInfo == "SETTING") {
+        return false;
       } else {
-        return this.type == 'setting' || this.payState == 1  ? true : false
+        return this.type == "setting" || this.payState == 1 ? true : false;
       }
     }
   },
   methods: {
+    //上传操作结束
+    cropClose() {
+      console.log('上传操作结束')
+    },
+    //上传图片成功
+    cropSuccess(data) {
+      this.imgUrl = data.data.avatar
+      console.log(this.imgUrl)
+    },
     themeChange(item) {
       // 切换主题时设置跟主题对应的主题色
       this.themeList.forEach(theme => {
-        theme.selected = false
-      })
-      item.selected = true
-      this.form.theme = item.value
-      this.form.themeColor = item.color
+        theme.selected = false;
+      });
+      item.selected = true;
+      this.form.theme = item.value;
+      this.form.themeColor = item.color;
 
-      let baseTenantId = sessionStorage.getItem('baseTenantId')
-      if(baseTenantId > 0) {
+      let baseTenantId = sessionStorage.getItem("baseTenantId");
+      if (baseTenantId > 0) {
         setTheme({
           themeColor: item.color,
           theme: item.value,
           saveTheme: false
-        })
+        });
       }
     },
     onSubmit() {
-      let state = false
+      let state = false;
       this.$refs.form.validate(_ => {
-        console.log(_)
-        state = _
-      })
-      return state
+        console.log(_);
+        state = _;
+      });
+      return state;
     },
     async checkPhone() {
-      const phone = this.form.phone
+      const phone = this.form.phone;
       try {
         const regu = /^1[3456789]\d{9}$/;
-        console.log(phone, regu)
+        console.log(phone, regu);
         const re = new RegExp(regu);
         if (re.test(phone)) {
-          let res = await checkStudentPhone({ mobile: phone })
-          console.log(res)
-          if(res.data?.id) {
-            this.errorPhone = '输入手机号已存在'
+          let res = await checkStudentPhone({ mobile: phone });
+          console.log(res);
+          if (res.data?.id) {
+            this.errorPhone = "输入手机号已存在";
           } else {
-            this.errorPhone = null
+            this.errorPhone = null;
           }
         }
-      } catch(e) {}
+      } catch (e) {}
     },
     onChangeProvince(val) {
       this.form.city = null;
@@ -341,13 +453,13 @@ export default {
     },
     getAreaList(parentId, callback) {
       parentId = parentId ? parentId : 0;
-      areaQueryChild({ parentId: parentId }).then((res) => {
+      areaQueryChild({ parentId: parentId }).then(res => {
         if (res.code == 200 && res.data) {
           let tempData = [];
-          res.data.forEach((item) => {
+          res.data.forEach(item => {
             tempData.push({
               label: item.name,
-              value: item.id,
+              value: item.id
             });
           });
           if (parentId) {
@@ -362,13 +474,30 @@ export default {
         }
       });
     },
-    getValues() { // 获取数据
+    getValues() {
+      // 获取数据
       this.form.areaId = this.form.city;
-      return this.form
+      return this.form;
     },
     handleAvatarSuccess(res) {
       this.form.logo = res.data.url;
     },
+    // handleAvatarSuccess(res, file, fileList) {
+    //   //上传成功后将图片地址赋值给裁剪框显示图片
+    //   this.$nextTick(() => {
+    //     this.option.img = URL.createObjectURL(file.raw);
+    //     this.fileinfo = res;
+    //     this.dialogVisible = true;
+    //   });
+    // },
+    // finish() {
+    //     this.$refs.cropper.getCropBlob((data) => {
+    //         var fileName = 'goods' + this.fileinfo.uid
+    //         this.loading = true
+    //         //上传阿里云服务器
+    //         //请求
+    //     })
+    // },
     beforeAvatarUpload(file) {
       const imageType = {
         "image/png": true
@@ -377,18 +506,18 @@ export default {
       const isLt2M = file.size / 1024 / 1024 < 2;
       if (!isImage) {
         this.$message.error("只能上传图片格式!");
-        return false
+        return false;
       }
       if (!isLt2M) {
         this.$message.error("上传头像图片大小不能超过 2MB!");
-        return false
+        return false;
       }
       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 () {
+        img.onload = function() {
           if (imageWidth && imageHeigh) {
             this.width === imageWidth && this.height === imageHeigh
               ? resolve()
@@ -410,7 +539,7 @@ export default {
         () => {
           return file;
         },
-        (src) => {
+        src => {
           this.$message.error(src);
           this.uploadImgLoading = false;
           return Promise.reject();
@@ -418,17 +547,17 @@ export default {
       );
       return isImage && isLt2M && isSize;
     },
-    validatePhone (rule, value, callback) {
+    validatePhone(rule, value, callback) {
       if (this.errorPhone) {
-        callback(new Error('输入手机号已存在'));
+        callback(new Error("输入手机号已存在"));
       } else {
         callback();
       }
     }
-  },
+  }
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 /deep/.avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;
@@ -446,7 +575,9 @@ export default {
   text-align: center;
 }
 
-.el-input, .el-select, .el-textarea {
+.el-input,
+.el-select,
+.el-textarea {
   width: 300px !important;
 }
 .avatar {
@@ -473,4 +604,16 @@ export default {
 .themeColor-block + .themeColor-block {
   margin-left: 12px;
 }
+
+// .cropper-content{
+//   width:400px;
+//   height:400px;
+//   background: pink;
+// }
+//     .cropper{
+//         width:400px;
+//         height:400px;
+//         background: yellow;
+//     }
+//     * { touch-action: none; }
 </style>

src/views/productService/components/cloudRecharge.vue

@@ -15,7 +15,7 @@
         <div class="descriptions">
           <div class="title">云教室扣费标准</div>
           <div class="tips">
-            <p style="padding-bottom: 10px">以1v1课程，既老师学员1对1教学，45分钟课程为例，每分钟收费标准{{ stand }}元，则该课程结束后将扣除云教室费用45分钟*{{ stand }}元/分钟={{ 45 * stand }}元</p>
+            <p style="padding-bottom: 10px">以1v1课程，即老师学员1对1教学，45分钟课程为例，每分钟收费标准{{ stand }}元，则该课程结束后将扣除云教室费用45分钟*{{ stand }}元/分钟={{ 45 * stand }}元</p>
             <el-table
               :data="tableData"
               border

src/views/resetTeaming/modals/activity.vue

@@ -7,7 +7,7 @@
 
     <div class="section">
       <el-row class="title-row">
-        <el-col :span="12">练习系统</el-col>
+        <el-col :span="12">课程类型</el-col>
         <el-col :span="5" :offset="1" style="text-align: right;">课程数</el-col>
         <el-col :span="6" style="text-align: right;">价格</el-col>
       </el-row>