后台管理项目工作总结

一、弹窗组件中的组件的值没渲染

destroy-on-close——————关闭弹窗时销毁 Dialog 中的元素	

二、记录多选表格操作记录

  <el-table
        ref="table"
        @select-all="moreSele"
        :border="false"
        :toolbar="false"
        :row-key="getRowKeys"
        @select="clickrow"
        cache-key="systemRoleTable">
    </el-table>
    data(){
    return{
        newList: [],
     }
    }，
    methods:{
      getRowKeys(row) {
        return row.id; //行唯一标识
      },
      //点击全选处理
      moreSele(e) {Ï
          if (e.length > 0) { //大于0勾选，status为true
            e.forEach((res) => {
              let obj = { id: res.id, status: true };
              this.newList.push(obj);
              this.$emit('ClientSelect', this.newList);
            });
          } else {//小于0取消勾选，status为false
            this.newList.forEach((res) => {
              let obj = { id: res.id, status: false };
              this.newList.push(obj);
              this.$emit('ClientSelect', this.newList);
            });
          }
      },
      //记录单点操作
      clickrow(e, row) {
          let zhi = row;
          zhi.status = false;
          this.newList.push(zhi);
          if (
            e.length > 0 &&
            e[e.length - 1].id == this.newList[this.newList.length - 1].id
          ) {
            this.newList[this.newList.length - 1].status = true;
          } else {
            this.newList[this.newList.length - 1].status = false;
          }
          this.newList = JSON.parse(JSON.stringify(this.newList));
          this.$emit('ClientSelect', this.newList);
      },
      async getlist(e) {
        const res = await EditPlan(e);
        this.$nextTick(() => {
          res.forEach((res) => {
            let obj = { id: res, status: true };
            this.$refs.table.toggleRowSelection(obj);//勾选已有
            this.newList.push(obj);
            this.$emit('ClientSelect', this.newList);
          });
        });
      },
    }

三、生成语音

let utterThis = new SpeechSynthesisUtterance('你好，世界！');
speechSynthesis.speak(utterThis);

四、上传图片视频，可预览

<template>
  <div>
    <el-upload
      ref="upload"
      style="display: flex"
      class="avatar-uploader"
      :show-file-list="false"
      action="//upload-z1.qiniup.com/"
      :limit="limit"
      :before-upload="beforeUpload"
      :on-progress="uploadProcess"
      :http-request="uploadQiniu"
    >
      <i
        v-if="!showUpload || !hasFile"
        class="el-icon-plus avatar-uploader-icon"
      />
    </el-upload>    
    <div
      style="position: relative; display: inline-block"
      @click="handlePictureCardPreview(fileUrl)"
      v-if="fileType === 'image/jpeg' || Type === 'image/jpeg'"
    >
      <img v-if="fileUrl" :src="fileUrl" class="avatar" />
      <i
        @click.stop="removePic(fileUrl)"
        v-if="fileUrl"
        style="position: absolute; top: -10px; right: -11px; cursor: pointer"
        class="el-icon-error"
      ></i>
    </div>
    <div
      style="position: relative; display: inline-block"
      @click="handlePictureCardPreview(fileUrl)"
      v-if="fileType === 'video/quicktime' || Type === 'video/quicktime'"
    >
      <video
        v-if="fileUrl"
        :src="fileUrl"
        class="avatar-video"
        controls="controls"
      >
        您的浏览器不支持视频播放
      </video>
      <i
        @click.stop="removePic(fileUrl)"
        v-if="fileUrl"
        style="position: absolute; top: -10px; right: -11px; cursor: pointer"
        class="el-icon-error"
      ></i>
    </div>
    //预览
    <el-dialog :modal="false" :visible.sync="dialogVisible">
      <img
        v-if="fileType === 'image/jpeg' || Type == 'image/jpeg'"
        width="100%"
        :src="dialogImageUrl"
        alt=""
      />
      <video
        style="width: 100%"
        v-if="fileType === 'video/quicktime' || Type == 'video/quicktime'"
        autoplay
        :src="dialogImageUrl"
      ></video>
    </el-dialog>
  </div>
</template>

<script>
  import { GetFile } from '@/api/cinema/index';
  import request from '@/utils/request';

  export default {
    props: {
      token: {
        type: String,
        default: ''
      },
      fileKey: {
        type: String
      },
      hasFile: {
        type: String
      },
      fileType: {
        type: String
      }
    },
    watch: {
      hasFile(val) {
        if (val) {
          this.fileUrl = val;
          this.showUpload = true;
        } else {
          this.fileUrl = val;
        }
      }
    },
    data() {
      return {
        limit: 1,
        showUpload: false, //控制limit最大值之后 关闭上传按钮
        dialogImageUrl: '',
        dialogVisible: false,
        Type: '', //上传 的类型
        fileUrl: '', // 上传成功后接口返回的地址
        uploadPercent: 0, // 上传时进度条显示的进度
        fileFlag: false // 显示文件还是进度条的标识
      };
    },
    methods: {
      getfilses(e) {
        const key = GetFile(e);
        return key;
      },
      // 上传成功的回调
      handleSuccess(res, file) {
        this.fileFlag = false;
        this.showUpload = true;
        this.fileUrl.push(res.key);
        this.$emit('file', this.fileUrl);
      },
      async uploadQiniu(res) {
        let a = res.file.name.split('.');
        const key = await this.getfilses(this.fileKey);
        const formData = new FormData();
        formData.append('file', res.file);
        formData.append('token', this.token);
        formData.append('key', key + '.' + a[a.length - 1]);
        request({
          url: 'https://upload-z1.qiniup.com',
          method: 'post',
          data: formData
        }).then((e) => {
          this.fileUrl = 'http://www.baidu.com/' + e.data.key;
          this.fileFlag = false;
          this.showUpload = true;
          this.$emit('file', e.data.key, this.Type);
        });
      },
      // 进度条
      uploadProcess(event, file) {
        this.fileFlag = true;
        this.uploadPercent = Math.floor(event.percent);
      },
      // 上传前知道拿到上传的类型
      beforeUpload(file) {
        console.log(file.type);
        this.Type = file.type;
        // video/quicktime
        // 先空着在下面优化，对上传格式的限制，需要动态判断
      },
      // 预览
      handlePictureCardPreview(file) {
        console.log(file);
        this.dialogImageUrl = file;
        this.dialogVisible = true;
      },
      // 删除
      removePic(file) {
        console.log(file);
        this.fileUrl = '';
        this.showUpload = false;
        this.$emit('file', '');
      }
    }
  };
</script>

<style scope>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 148px;
    max-height: 148px;
    display: block;
  }
  .avatar-video {
    width: 200px;
    max-height: 200px;
    display: block;
  }
  /*  */
  .hide .el-upload--picture-card {
    display: none !important;
  }
</style>


//使用
        <uploadFile
          :fileType="tpes" //回显类型，图片（image/jpeg）视频（video/quicktime'）
          :hasFile="obj.verticalKeyPath"//控制上传按钮
          :fileKey="fileTypelogo" //文件名（不需要改文件名把相关删了）
           @file="UpchangVer" //处理
          :token="uploadToken" //token
        />

五、Tree 树形控件吗，不遵循父子关系

<!-- 角色权限分配弹窗 -->
<template>
  <ele-dialog
    width="460px"
    title="分配权限"
    :visible="visible"
    @update:visible="updateVisible"
  >
    <el-scrollbar
      v-loading="authLoading"
      style="height: 60vh"
      wrap-style="overflow-x: hidden;"
    >
      <el-tree
        ref="tree"
        :data="authData"
        :props="defaultProps"
        node-key="id"
        :default-expand-all="true"
        show-checkbox
        check-strictly
        @check-change="checkChange"
      />
    </el-scrollbar>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-dialog>
</template>

<script>
  import {
    listRoleMenus,
    updateRoleMenus,
    listRoles
  } from '@/api/ticket/index';

  export default {
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 当前角色数据
      Roleid: Number
    },
    data() {
      return {
        defaultProps: {
          children: 'childrenPath',
          label: 'desc'
        },
        // 权限数据
        authData: [],
        // 权限数据请求状态
        authLoading: false,
        // 提交状态
        loading: false,
        // 角色权限选中的keys
        checkedKeys: []
      };
    },
   watch: {
      visible(visible) {
        if (visible) {
          this.list();
          this.query();
        }
      }
    }
    methods: {
      list() {
        listRoles().then((e) => {
          this.authData = e.data;
        });
      },
      checkChange(data, check) {
        let thisNode = this.$refs.tree.getNode(data.id); // 获取当前节点
        const keys = this.$refs.tree.getCheckedKeys(); // 获取已勾选节点的key值
        if (thisNode.checked) {
          // 当前节点若被选中
          for (let i = thisNode.level; i > 1; i--) {
            // 判断是否有父级节点
            if (!thisNode.parent.checked) {
              // 父级节点未被选中，则将父节点替换成当前节点，往上继续查询，并将此节点key存入keys数组
              thisNode = thisNode.parent;
              keys.push(thisNode.data.id);
            }
          }
        }
        this.$refs.tree.setCheckedKeys(keys);
        if (data.childrenPath != null && check === false) {
          for (var j = 0, len = data.childrenPath.length; j < len; j++) {
            var childNode = this.$refs.tree.getNode(data.childrenPath[j].id);
            if (childNode.checked === true) {
              this.$refs.tree.setChecked(childNode.data.id, false);
            }
          }
        }
      },
      /* 查询权限数据 */
      query() {
        this.authLoading = true;
        listRoleMenus(this.Roleid).then((res) => {
          this.authLoading = false;
          if (res.code === 0) {
            if (res.data) {
              this.$refs.tree.setCheckedKeys(res.data);
            } else {
              this.$refs.tree.setCheckedKeys([]);
            }
          }
        });
      },
      /* 保存权限分配 */
      save() {
        this.loading = true;
        const ids = this.$refs.tree
          .getCheckedKeys()
          .concat(this.$refs.tree.getHalfCheckedKeys());
        updateRoleMenus(ids, this.Roleid)
          .then((msg) => {
            this.loading = false;
            this.$message.success('成功');
            this.updateVisible(false);
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      }
    },
  };
</script>

六、后台权限

补充中…………

七、HTML

1、（datalist） 标签，可实现input历史效果

点击行选择表格

 @row-click="handleRowClick"
//点击行触发，选中或不选中复选框
 handleRowClick(row, column, event) {
  his.$refs.multipleTable.toggleRowSelection(row);
},