图片上传（自己记笔记的）

<template>
  <div class="manage-box">
    <el-tabs tab-position="left" class="tab-box">
      <el-tab-pane label="协作管理">
        <div class="tab-item-box">
          <div class="cooperation-header">
            <el-input
              placeholder="请输入内容"
              v-model="cooperationVal"
              class="cooperation-val"
            >
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="primary" @click="addCooDiag">添加成员</el-button>
          </div>
          <el-table :data="tableData" border class="cooperation-table">
            <el-table-column prop="gonghao" label="工号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="tel" label="电话"> </el-table-column>
            <el-table-column prop="dep" label="部门"> </el-table-column>
            <el-table-column prop="beizhu" label="备注"> </el-table-column>
            <el-table-column prop="juese" label="角色"> </el-table-column>
            <el-table-column prop="" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="editRow(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  @click="deleteRow(scope.$index)"
                  type="text"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="企业管理">
        <el-form :model="companyForm" ref="ruleForm">
          <el-form-item label="LOGO" :label-width="formLabelWidth" prop="img">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:6347/eostenant/TenantAnnexesFile/uploadFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beForeUpload"
            >
              <img
                v-if="companyForm.img"
                :src="companyForm.img"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item
            label="企业名称"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input v-model="companyForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="企业规模"
            :label-width="formLabelWidth"
            prop="industry"
          >
            <el-select
              v-model="companyForm.industry"
              placeholder="请选择活动区域"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="公司地址"
            :label-width="formLabelWidth"
            prop="address"
          >
            <el-input
              v-model="companyForm.address"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" style="float: right">更 新</el-button>
      </el-tab-pane>
      <el-tab-pane label="订单管理">
        <div class="order-box">
          <div class="order-ite" v-for="(ele, key) in orderList" :key="key">
            <div  class="order-info" style="fontSize:16px">方案信息<span>(ZQSOFT)</span></div>
            <div class="order-info">
              <div class="order-left" >版本信息: <span class="order-text" style="color:dodgerblue">{{ ele.版本信息 }}</span></div>
              <div>版本状态: <span class="order-text" >{{ ele.版本状态 }}</span> </div>
            </div>
            <div class="order-info">
              <div class="order-left" >购买席位: <span class="order-text">{{ ele.购买席位 }}</span> </div>
              <div>到期日期: <span class="order-text">{{ ele.到期日期 }}</span> </div>
            </div>
            <div class="btn-box">
              <div class="order-btn selet-btn">购买席位/时长</div>
              <div class="order-btn">订单记录</div>
              <div class="order-btn">发票历史</div>
              <div class="order-btn">申请发票</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 协作管理添加成员 -->
    <el-dialog title="添加成员" :visible.sync="cooDialog">
      <el-form :model="form" ref="ruleForm">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="tel">
          <el-input v-model="form.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="企业部门选择"
          :label-width="formLabelWidth"
          prop="dep"
        >
          <el-select v-model="form.dep" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="企业角色选择"
          :label-width="formLabelWidth"
          prop="juese"
        >
          <el-select v-model="form.juese" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveAdd">保存并继续添加</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabList: [
        {
          key: 0,
          label: "协作管理",
        },
        {
          key: 1,
          label: "企业管理",
        },
        {
          key: 2,
          label: "订单管理",
        },
      ],
      cooperationVal: "", //协作管理搜索
      //协作管理表格
      tableData: [
        {
          id: "1",
          gonghao: "1",
          name: "王小虎",
          tel: "13900989090",
          dep: "管理部",
          beizhu: "备注",
          juese: "创建者",
        },
        {
          id: "121",
          gonghao: "121",
          name: "王小虎",
          tel: "13900989090",
          dep: "管理部",
          beizhu: "备注",
          juese: "创建者",
        },
        {
          id: "132",
          gonghao: "112",
          name: "王小虎",
          tel: "13900989090",
          dep: "管理部",
          beizhu: "备注",
          juese: "创建者",
        },
        {
          id: "12",
          gonghao: "122",
          name: "王小虎",
          tel: "13900989090",
          dep: "管理部",
          beizhu: "备注",
          juese: "创建者",
        },
      ],
      cooDialog: false,
      form: {
        name: "",
        tel: "",
        dep: "",
        juese: "",
      },
      formLabelWidth: "120px",
      //公司信息
      companyForm: {
        img: "",
        name: "",
        industry: "",
        scale: "",
        address: "",
      },
      //订单管理
      orderList: [
        {
          版本信息: "企业版",
          版本状态: "已付费",
          购买席位: "5人(剩余0人)",
          到期日期: "2022-12-13",
        },
        {
          版本信息: "企业版",
          版本状态: "已付费",
          购买席位: "5人(剩余0人)",
          到期日期: "2022-12-13",
        },
        {
          版本信息: "企业版",
          版本状态: "已付费",
          购买席位: "5人(剩余0人)",
          到期日期: "2022-12-13",
        },
      ],
    };
  },
  methods: {
    deleteRow(row) {
      console.log(row, "row");
      this.tableData.splice(row, 1);
    },
    editRow(row) {
      this.cooDialog = true;
      this.form = row;
    },
    addCooDiag() {
      this.cooDialog = true;
      this.form.name = "";
      this.form.tel = "";
      this.form.dep = "";
      this.form.juese = "";
    },
    saveAdd() {
      this.tableData.push(this.form);
    },
    save() {
      this.tableData.push(this.form);
      this.cooDialog = false;
    },
    //企业管理
    handleAvatarSuccess(res, file) {
      file.trim
      console.log("file.raw",file.raw);
      this.companyForm.img = URL.createObjectURL(file.raw);
    },

    beForeUpload(file) {
     const names = file.name.split(".");
     const type = names[names.length - 1];
     const is = window.uploadFilesType.type.includes(type);
     if (is) {
       if (this.folderName != "") {
          const name = "newfile";
          var formData = new FormData();
          formData.append("files", file);// 文件流
          formData.append("name", "1690000001111HeadImg");// 文件名称 实际是租户id tenantId
          formData.append("staticKey", "UpFile");// 静态目录主键
          formData.append("folder", "tenantLogoImg");// 文件夹，空则按系统规则生成 tenantUserHeadImg
          formData.append("thumbnail", false); // 生成缩略图
          // toolApi -p 6348 hosToolApi -p 6355
          this.$_api.eostenantApi 
            .Post({
              url: "TenantAnnexesFile/uploadFile",
              data: formData,
            })
            .then((res) => {
  this.getCheckFolderList(this.folderName);
});
}
} else {
  console.log("不允许上传", type, is);
}

return false;
},
    beforeAvatarUpload(file) {

    },
  },
};
</script>
<style scoped lang="scss">
::v-deep {
  //企业管理
  .avatar-uploader .el-upload {
    border: 1px dashed var(--font-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: var(--tabNav-background);
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.manage-box {
  width: 100%;
  height: 100%;
  padding-right: 10px;
  padding-top: 20px;
  .tab-box {
    height: 100%;
    //协作管理
    .cooperation-header {
      padding-right: 20px;
      display: flex;
      justify-content: space-between;
      .cooperation-val {
        width: 45%;
      }
    }
    .cooperation-table {
      width: 100%;
      margin-top: 20px;
    }
  }
}
//订单管理
.order-box{
  .order-ite{
    margin: 20px 10px;
    background: #fff;
    padding: 10px 20px;
    border-radius: 8px;
  }
  .order-info{
    display: flex;
    margin: 15px;
    font-size: 14px;
    color: #8c939d;
    .order-text{
      color: #000;
    }
    .order-left{
      width: 200px;
    }
  }
  .btn-box{
    margin-top: 10px;
    display: flex;
    .order-btn{
      padding: 3px 8px;
      border: 1px solid #8c939d;
      margin: 0 6px ;
      cursor: pointer;
      font-size: 12px;
    }
    .selet-btn{
      background: var(--button-bg);
      border-color: var(--button-bg);
      color: #fff;
    }
  }
}
</style>