|  | @@ -0,0 +1,177 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div class="oboc">
 | 
	
		
			
				|  |  | +    <div class="oboc-operation">
 | 
	
		
			
				|  |  | +      <el-button type="primary" @click="createLink">创建链接</el-button>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    <CommonTable
 | 
	
		
			
				|  |  | +      :page-size="page_capacity"
 | 
	
		
			
				|  |  | +      :min-height="554"
 | 
	
		
			
				|  |  | +      :total="total_count"
 | 
	
		
			
				|  |  | +      :current-page="cur_page"
 | 
	
		
			
				|  |  | +      @prev-click="changePage($event, pageQueryOBOCList)"
 | 
	
		
			
				|  |  | +      @next-click="changePage($event, pageQueryOBOCList)"
 | 
	
		
			
				|  |  | +      @current-change="changePage($event, pageQueryOBOCList)"
 | 
	
		
			
				|  |  | +      @size-change="changePageSize($event, pageQueryOBOCList)"
 | 
	
		
			
				|  |  | +    >
 | 
	
		
			
				|  |  | +      <el-table :data="list">
 | 
	
		
			
				|  |  | +        <el-table-column label="类型" width="90" align="center">
 | 
	
		
			
				|  |  | +          <template slot-scope="{ row }">
 | 
	
		
			
				|  |  | +            <span>{{ row.type === 0 ? '试用' : '一书一码' }}</span>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </el-table-column>
 | 
	
		
			
				|  |  | +        <el-table-column prop="book_name" label="教材" width="240" />
 | 
	
		
			
				|  |  | +        <el-table-column prop="identity_code" label="识别码" width="120" />
 | 
	
		
			
				|  |  | +        <el-table-column prop="creator_name" label="创建人" width="150" />
 | 
	
		
			
				|  |  | +        <el-table-column prop="create_time" label="创建时间" width="160" />
 | 
	
		
			
				|  |  | +        <el-table-column label="有效天数" width="100">
 | 
	
		
			
				|  |  | +          <template slot-scope="{ row }">
 | 
	
		
			
				|  |  | +            <span>{{ row.effective_day_count === -1 ? '永久' : `${row.effective_day_count}天` }}</span>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </el-table-column>
 | 
	
		
			
				|  |  | +        <el-table-column label="到期剩余天数" width="140">
 | 
	
		
			
				|  |  | +          <template slot-scope="{ row }">
 | 
	
		
			
				|  |  | +            <span>{{ row.is_disabled === 'true' ? '已废弃' : formateDate(row.effective_end_date) }}</span>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </el-table-column>
 | 
	
		
			
				|  |  | +        <el-table-column label="操作" fixed="right" width="200">
 | 
	
		
			
				|  |  | +          <template slot-scope="{ row }">
 | 
	
		
			
				|  |  | +            <span class="set-oboc operable" @click="copyLink(row.url)">复制链接</span>
 | 
	
		
			
				|  |  | +            <span class="set-oboc operable" @click="deleteOBOC(row.id)">删除</span>
 | 
	
		
			
				|  |  | +            <span v-if="row.is_disabled !== 'true'" class="set-oboc operable" @click="disableOBOC(row.id)">废弃</span>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </el-table-column>
 | 
	
		
			
				|  |  | +      </el-table>
 | 
	
		
			
				|  |  | +    </CommonTable>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    <CreateLink :visible="visible" @close="closeCreateLink" @confirm="createOBOC" />
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  name: 'QuotaList'
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script setup>
 | 
	
		
			
				|  |  | +import { ref } from 'vue';
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +import { PageQueryOBOCList } from '@/api/list';
 | 
	
		
			
				|  |  | +import { CreateOBOC, DeleteOBOC, DisableOBOC } from '@/api/oboc';
 | 
	
		
			
				|  |  | +import { useList } from '@/utils/list';
 | 
	
		
			
				|  |  | +import { Message, MessageBox } from 'element-ui';
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +import CommonTable from '@/components/common/CommonTable.vue';
 | 
	
		
			
				|  |  | +import CreateLink from './CreateLink.vue';
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const { page_capacity, cur_page, total_count, list, changePage, changePageSize } = useList();
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +function pageQueryOBOCList() {
 | 
	
		
			
				|  |  | +  PageQueryOBOCList({
 | 
	
		
			
				|  |  | +    page_capacity: page_capacity.value,
 | 
	
		
			
				|  |  | +    cur_page: cur_page.value,
 | 
	
		
			
				|  |  | +    type: -1,
 | 
	
		
			
				|  |  | +    book_name: ''
 | 
	
		
			
				|  |  | +  }).then(({ oboc_list, total_count: total, cur_page: page }) => {
 | 
	
		
			
				|  |  | +    list.value = oboc_list;
 | 
	
		
			
				|  |  | +    total_count.value = total;
 | 
	
		
			
				|  |  | +    cur_page.value = page;
 | 
	
		
			
				|  |  | +  });
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +pageQueryOBOCList();
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +let visible = ref(false);
 | 
	
		
			
				|  |  | +function createLink() {
 | 
	
		
			
				|  |  | +  visible.value = true;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +function closeCreateLink() {
 | 
	
		
			
				|  |  | +  visible.value = false;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +/**
 | 
	
		
			
				|  |  | + * 创建一书一码
 | 
	
		
			
				|  |  | + * @param {String} book_id
 | 
	
		
			
				|  |  | + * @param {Number} type
 | 
	
		
			
				|  |  | + * @param {Number} effective_day_count
 | 
	
		
			
				|  |  | + */
 | 
	
		
			
				|  |  | +function createOBOC(book_id, type, effective_day_count) {
 | 
	
		
			
				|  |  | +  CreateOBOC({ book_id, type, effective_day_count }).then(() => {
 | 
	
		
			
				|  |  | +    visible.value = false;
 | 
	
		
			
				|  |  | +    pageQueryOBOCList();
 | 
	
		
			
				|  |  | +    Message.success(`创建一书一码成功`);
 | 
	
		
			
				|  |  | +  });
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +function copyLink(url) {
 | 
	
		
			
				|  |  | +  navigator.clipboard.writeText(url).then(() => {
 | 
	
		
			
				|  |  | +    Message.success(`复制链接成功`);
 | 
	
		
			
				|  |  | +  });
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +function deleteOBOC(id) {
 | 
	
		
			
				|  |  | +  MessageBox.confirm('是否删除该一书一码?', '提示', {
 | 
	
		
			
				|  |  | +    confirmButtonText: '确定',
 | 
	
		
			
				|  |  | +    cancelButtonText: '取消',
 | 
	
		
			
				|  |  | +    type: 'warning'
 | 
	
		
			
				|  |  | +  }).then(() => {
 | 
	
		
			
				|  |  | +    DeleteOBOC({ id }).then(() => {
 | 
	
		
			
				|  |  | +      Message.success(`删除一书一码成功`);
 | 
	
		
			
				|  |  | +      pageQueryOBOCList();
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +  });
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +function disableOBOC(id) {
 | 
	
		
			
				|  |  | +  MessageBox.confirm('是否废弃该一书一码?', '提示', {
 | 
	
		
			
				|  |  | +    confirmButtonText: '确定',
 | 
	
		
			
				|  |  | +    cancelButtonText: '取消',
 | 
	
		
			
				|  |  | +    type: 'warning'
 | 
	
		
			
				|  |  | +  }).then(() => {
 | 
	
		
			
				|  |  | +    DisableOBOC({ id }).then(() => {
 | 
	
		
			
				|  |  | +      pageQueryOBOCList();
 | 
	
		
			
				|  |  | +      Message.success(`废弃一书一码成功`);
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +  });
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +/**
 | 
	
		
			
				|  |  | + * 将 20241221 转换为 2024年12月21日 格式
 | 
	
		
			
				|  |  | + * @param {String} originalDate
 | 
	
		
			
				|  |  | + */
 | 
	
		
			
				|  |  | +function formateDate(originalDate) {
 | 
	
		
			
				|  |  | +  const dateStr = originalDate.toString();
 | 
	
		
			
				|  |  | +  let year = dateStr.substring(0, 4);
 | 
	
		
			
				|  |  | +  let month = dateStr.substring(4, 6);
 | 
	
		
			
				|  |  | +  let day = dateStr.substring(6, 8);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  return `${year}年${month}月${day}日`;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<style lang="scss" scoped>
 | 
	
		
			
				|  |  | +@import '~@/styles/mixin';
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +.oboc {
 | 
	
		
			
				|  |  | +  @include container;
 | 
	
		
			
				|  |  | +  @include dialog;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  padding: 24px 0 46px;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  &-operation {
 | 
	
		
			
				|  |  | +    display: flex;
 | 
	
		
			
				|  |  | +    align-items: center;
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  .el-table {
 | 
	
		
			
				|  |  | +    .set-oboc {
 | 
	
		
			
				|  |  | +      margin-right: 12px;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    :deep th.el-table__cell {
 | 
	
		
			
				|  |  | +      color: #000;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</style>
 |