eep_page/src/views/book/courseware/create/components/question/article/CompareTime.vue

<template>
  <div class="CompareTime">
    <template v-if="type == '句子'">
      <table>
        <tr>
          <th style="width: 280px">句子</th>
          <th style="width: 200px">开始时间</th>
          <th style="width: 200px">结束时间</th>
        </tr>
        <tr v-for="(item, index) in data" :key="index + 'sen'">
          <td>{{ item.onebest }}</td>
          <td>
            <input v-model="item.bg" type="text" maxlength="200" show-word-limit @change="changeTime(item, 'bg')" />
          </td>
          <td>
            <input v-model="item.ed" type="text" maxlength="200" show-word-limit @change="changeTime(item, 'ed')" />
          </td>
        </tr>
      </table>
    </template>
    <template v-else>
      <table>
        <tr>
          <th style="width: 280px">句子</th>
          <th style="width: 200px">操作</th>
        </tr>
        <tr v-for="(item, index) in data" :key="index + 'sen'">
          <td>{{ item.onebest }}</td>
          <td>
            <el-button type="primary" size="medium" @click="compareOneHZ(index)">校对文字字幕时间</el-button>
          </td>
        </tr>
      </table>
    </template>
    <template v-if="wordData">
      <el-dialog
        title="校对字母时间"
        :visible.sync="oneHZshow"
        width="60%"
        :before-close="handleClose"
        :modal="false"
        top="0"
      >
        <table>
          <tr>
            <th style="width: 250px">文字</th>
            <th style="width: 200px">开始时间</th>
            <th style="width: 200px">结束时间</th>
          </tr>
          <tr v-for="(item, index) in wordData" :key="index + 'wordsResul'">
            <td>{{ item.wordsName ? item.wordsName : item.onebest }}</td>
            <td>
              <input
                v-model="item.wordBg"
                type="text"
                maxlength="200"
                show-word-limit
                @change="changeTime(item, 'wordBg')"
              />
            </td>
            <td>
              <input
                v-model="item.wordEd"
                type="text"
                maxlength="200"
                show-word-limit
                @change="changeTime(item, 'wordEd')"
              />
            </td>
          </tr>
        </table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button :loading="compareloading" type="primary" @click="savehz">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>

<script>
// 这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》from ‘《组件路径》';
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: ['data', 'type', 'changewordsResultList', 'openCheckSubtitles'],
  data() {
    // 这里存放数据
    return {
      oneHZshow: false,
      compareloading: false,
      wordData: null,
      index: null,
    };
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期-挂载之前
  beforeMount() {},
  // 生命周期-更新之后
  updated() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 方法集合
  methods: {
    changeTime(item, type) {
      item[type] = Number(item[type]);
      if (type == 'bg' || type == 'en') {
        item.adjust = '1';
      }
    },
    compareOneHZ(index) {
      // this.index = index;
      // this.wordData = JSON.parse(JSON.stringify(this.data[index].wordsResultList));
      // this.oneHZshow = true;
      this.openCheckSubtitles('文字', index);
    },
    savehz() {
      this.data[this.index].wordsResultList = JSON.parse(JSON.stringify(this.wordData));
      this.changewordsResultList(this.index, this.wordData);
      this.$message.success('保存成功');
    },
    handleClose() {
      this.index = null;
      this.wordData = null;
      this.oneHZshow = false;
    },
  },
  // 生命周期-创建之前
  beforeCreated() {},
  // 生命周期-更新之前
  beforUpdate() {},
  // 生命周期-销毁之前
  beforeDestory() {},
  // 生命周期-销毁完成
  destoryed() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.CompareTime {
  .sentence {
    // display: flex;
    // align-items: center;
    margin-top: 15px;

    .time {
      margin-top: 15px;
    }
  }

  table {
    border-collapse: collapse;

    tr {
      > :nth-child(2) {
        text-align: center;
      }

      > :nth-child(3) {
        text-align: center;
      }

      td {
        height: 50px;
        border: 1px solid black;

        input {
          border: none;
          outline: none;
        }
      }

      th {
        height: 50px;
        border: 1px solid black;
      }
    }
  }
}
</style>