treee, 修复tab切换时树的选中状态.添加区域

zhangzengfei

2021-02-04 0175cda6150656bc74b34c6f6c71edd1e1fc653c

 src/pages/cameraAccess/components/DataStackInfo.vue

@@ -13,7 +13,22 @@
            <el-radio v-model="form.type" :label="3" :disabled="!isAdd">音频</el-radio>
            <el-radio v-model="form.type" :label="4" :disabled="!isAdd">其他数据</el-radio>
          </el-form-item>

          <el-form-item label="处理分辨率" style="width:440px">
            <el-select
              v-model="form.resolution"
              placeholder="本机分辨率"
              style="position: absolute;left: 0;"
              size="small"
              @change="checkResolution"
            >
              <el-option
                v-for="item in form.resolutions"
                :key="`${item.width}*${item.height}`"
                :label="`${item.width}*${item.height}`=='0*0'?'本机分辨率':`${item.width}*${item.height}`"
                :value="`${item.width}*${item.height}`"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="处理完成后自动删除文件"
            prop="isAutoDelFile"
@@ -50,7 +65,7 @@
              <li>
                <info-card
                  style="width: 100%;min-width: 440px"
                  :realtime="PollData.RealTimeSum"
                  :realtime="PollData.RealTimeValidCount"
                  :polling="PollData.PollValidCount"
                  :dataStack="PollData.stackChannelCount"
                ></info-card>
@@ -105,15 +120,20 @@
        </el-tooltip>

        <!-- 文件上传 -->
        <el-button
          type="primary"
          size="small"
          :disabled="!DataStackPool.selectedDir.id"
          @click="handleUpload"
        >
          上传
          <i class="el-icon-upload el-icon--right"></i>
        </el-button>
        <template v-for="stack in DataStackPool.dirs">
          <el-button
            :class="`uploader_${stack.id}`"
            :key="stack.id"
            type="primary"
            size="small"
            v-show="stack.id == DataStackPool.selectedDir.id"
            :disabled="!DataStackPool.selectedDir.id"
            @click="handleUpload"
          >
            上传
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </template>
      </div>
    </div>

@@ -128,7 +148,7 @@
      @select="handleSelect"
      @select-all="handleSelect"
    >
      <el-table-column type="selection" width="50" align="center" :selectable="isSelectable"></el-table-column>
      <el-table-column type="selection" align="center" :selectable="isSelectable"></el-table-column>
      <el-table-column prop="name" label="文件名">
        <template slot-scope="{row}">
          <div :class="snapshotClass">
@@ -143,7 +163,7 @@
            </el-image>
            <el-image
              v-if="row.type==2"
              style="width: 30x; height: 30px"
              style="width: 30x; height: 30px;background:#fff;"
              :src="`/files/${row.path.substr(row.path.lastIndexOf('/')+1)}`"
              fit="fill"
              :preview-src-list="[`/files/${row.path.substr(row.path.lastIndexOf('/')+1)}`]"
@@ -167,7 +187,7 @@
          >{{row.name}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="fileSize" label="大小" width="120">
      <el-table-column prop="fileSize" label="大小">
        <template slot-scope="scope">{{scope.row.size | readFileSizeUnit}}</template>
      </el-table-column>
      <el-table-column prop="duration" label="时长" show-overflow-tooltip align="center"></el-table-column>
@@ -217,7 +237,7 @@
                :disabled="scope.row.status == 2"
                class="iconfont iconzhongxinkaishi btn"
                @click="handleFileStatus(scope.row, 1)"
                v-show="scope.row.status === 9"
                v-show="scope.row.status === 9 || scope.row.status === -2"
              ></el-button>
            </el-tooltip>

@@ -252,10 +272,11 @@
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-show="activeName=='uploaded'"
        @size-change="handleSizeChange"
        @current-change="handleRefrashFileList"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="size"
        style="position:absolute;right:10px;bottom:5px"
        :total="total"
@@ -263,10 +284,15 @@
      ></el-pagination>
    </div>

    <!-- 文件上传组件 -->
    <!-- <file-uploader ref="uploader" v-show="activeName === 'uploading'" :attrs="attrs" /> -->
    <file-uploader ref="uploader" v-show="activeName === 'uploading'" />

    <template v-for="stack in DataStackPool.dirs">
      <!-- 文件上传组件 -->
      <file-uploader
        :ref="`uploader_${stack.id}`"
        :key="stack.id"
        v-show="activeName === 'uploading' && stack.id == DataStackPool.selectedDir.id"
        :sourceType="stack.type"
      />
    </template>
    <!-- 文件预览 -->
    <el-dialog title="查看文件" :visible.sync="previewDialog" width="500px">
      <video v-if="videoUrl" :src="videoUrl" controls style="margin-top: 12px;">您的浏览器不支持 video 标签。</video>
@@ -330,6 +356,7 @@
  filters: {
    statusFormat (value) {
      let statusCode = {
        "-2": "处理异常",
        "-1": "已删除",
        "0": "暂停处理",
        "1": "等待处理",
@@ -389,7 +416,8 @@
      multipleSelection: [],
      searchInput: "",
      form: {
        id: ""
        id: "",
        resolution: ""
      },
      fileList: [],
      // 记录添加状态
@@ -409,9 +437,6 @@
      timer: 0,
      targetDir: "",
      targetFile: "",
      attrs: {
        accept: ""
      }
    };
  },
  mounted () {
@@ -427,24 +452,15 @@
      handler (n, o) {
        //数据栈文件数量变更
        //更新独立场景数据栈文件
        console.log(this.$root.$children[0].$children[1].$refs['sepRule']);
        this.$root.$children[0].$children[1].$refs['sepRule'].getStackFiles();
      }
    },
    'form.type': {
      handler (n, o) {
        console.log(n, o)
        if (n == 1) {
          //仅支持上传视频
          this.$set(this.attrs, 'accept', ".mp4");
        }else if (n == 2) {
          //图片
          this.$set(this.attrs, 'accept', "image/jpg,image/jpeg,image/png");
        }
      }
    }
  },
  methods: {
    checkResolution (val) {
      this.form.resolution_width = Number(val.split('*')[0]);
      this.form.resolution_height = Number(val.split('*')[1]);
    },
    preview (row) {
      this.previewDialog = true;
      if (row.type === 1) {
@@ -476,11 +492,10 @@
      this.fileList = [];
    },
    selectDir (node) {

      if (node.id === "") {
        return
      }

      console.log('选择数据栈', node)
      this.isDisabled = false;
      this.isAdd = false;
      this.videoItem = null;
@@ -488,6 +503,7 @@
      // this.initFormData();
      // this.$refs.addForm.clearValidate();
      this.form = { ...node };
      this.form.resolution = `${node.resolution_width}*${node.resolution_height}`;
      delete this.form.createTime;
      delete this.form.updateTime;
      delete this.form.status;
@@ -511,9 +527,7 @@
      if (uid !== this.taskUid || this.form.id === "") {
        return;
      }

      this.fetchFileList();

      let _this = this;
      this.timer = setTimeout(() => {
        _this.timingtask(uid);
@@ -521,11 +535,9 @@
    },
    fetchFileList () {
      findAllFileByStackId({ name: this.searchInput, stackId: this.form.id, page: this.page, size: this.size, type: 0 }).then(rsp => {
        if (rsp && rsp.success && rsp.data.total > 0) {
        if (rsp && rsp.success && rsp.data.total >= 0) {
          this.fileList = rsp.data.dataList;

          this.total = rsp.data.total;

          // 定时刷新会清空选中状态，在这里恢复
          this.fileList.forEach(row => {
            //this.polygonDatas.push({snapshot_url:row.snapshot_url})
@@ -539,11 +551,19 @@
      }).catch(err => {
        console.log(err)
      })

    },

    // 保存
    onSubmit (formName) {
      if (formName == 'addForm') {
        if (this.form.name.indexOf('/') >= 0) {
          this.$notify({
            type: "error",
            message: "保存失败,数据栈名称不能包含'/'！"
          });
          return;
        }
      }
      this.$refs[formName].validate(async valid => {
        if (valid) {
          saveDir(this.form).then(rsp => {
@@ -605,10 +625,8 @@
      this.multipleSelection = [];
    },
    handleUpload () {

      console.log(this.DataStackPool.selectedDir.id)
      console.log(this.$refs.uploader.$refs.button.attrs)
      console.log(this.$refs.uploader.$refs.button.$refs.btn.click())
      console.log(this.$refs[`uploader_${this.DataStackPool.selectedDir.id}`][0].$refs.button.$refs.btn.click())
    },
    handleRefrashFileList (val) {
      this.page = val;