wend

标注管理平台

功能概述：

管理翻译兼职人员信息以及翻译任务

具体功能：

1. 用户管理
2. 任务管理【任务集管理】【任务管理】
3. 任务统计【术语标注】【译后修订】【审校任务】【术语干预】

对应功能的页面组件

1-用户管理：

	1.1.  组件所在位置：src/user/index.vue
	1.2. 实现功能：
	1.2.1. 新增用户信息:
	
 --组件：绑定事件触发函数

//按钮，属性包括类名，样式，触发函数
<el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >

--函数-

handleCreate() {
//
      this.resetTemp()
      //设置值为create，会调用函数createdata
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },

--表单获取数据

<el-form
        ref="dataForm"
        :rules="rules"
        //双向数据绑定
        :model="temp"
        label-position="left"
        label-width="90px"
        style="width: 400px; margin-left: 50px"
      >

--获取数据对象

resetTemp() {
//表单form绑定数据model，接受输入信息
      this.temp = {
        id: '',
        role: '',
        user: '',
        password: '',
        rePassword: '',
        user_name: '',
        school: '',
        wechat: '',
        gender: 'MALE',
        commnent: ''
      }
    },

1.2.2  搜索用户

--组件

<el-input
        v-model="queryAccount"
        //querryaccount接受·用户输入参数
        placeholder="账号"
        //默认提示值
        clearable
        style="width: 200px"
        class="filter-item"
        //点击回车触发事件
        @keyup.enter.native="handleFilter"
      />

--函数

handleFilter() {
      this.getList()
      //获取数据
    },
 getList() {
 //设置加载状态为true
      this.listLoading = true
      //如果有参数
      if (this.queryAccount) {
      //
        this.listQuery.filter.user = {
          $regex: this.queryAccount
        }
      } else {
        this.listQuery.filter.user = null
      }
      //传入参数，getuserlist后端接口，获取响应
      getUserList(this.listQuery).then((response) => {
        console.log(response.data)
        // this.list = response.data
        // console.log(response.data.users)
        //定义变量接受参数
        const { total, profiles } = response.data
        //table绑定list、渲染到页面上
        this.list = profiles
        this.total = total
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1 * 1000)
      })
    },

1.2.3.导出信息
--组件

<el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="handleExport"
      >

--函数

handleExport() {
//
      const loading = this.$loading({
        lock: true,
        text: '用户信息导出中',//加载文案
        spinner: 'el-icon-loading',//加载图标类名
        background: 'rgba(0, 0, 0, 0.7)'//遮罩层颜色
      })
      //调用接口
      getUserList(
      //向对象中添加属性
        Object.assign(this.listQuery, {
          page_size: 20000
        })
      ).then((response) => {
      //接受响应
        let { profiles } = response.data
        profiles = profiles.map((item) => {
          const { profile, user } = item
          const { id, user: account, user_name, status, role } = user
          const { gender, level, school, wechat, rank_post_edit } = profile
          return {
            ID: id,
            账号: account,
            昵称: user_name,
            性别:
              gender !== 'UNDEFINED' ? (gender === 'MALE' ? '男' : '女') : '',
            学校: school,
            微信: wechat,
            角色: role === 'admin' ? '管理员' : '用户',
            等级: this.LEVELMAP[level],
            积分: rank_post_edit,
            状态: status === 'ACTIVE' ? '正常' : '禁用'
          }
        })
        const json2csvParser = new Parser()
        const csv = json2csvParser.parse(profiles)
        const a = document.createElement('a')
        a.href = 'data:attachment/csv,' + encodeURIComponent(csv)
        a.target = '_blank'
        a.download = `众包平台用户信息.csv`
        document.body.appendChild(a) // Firefox 中必须这么写，不然不会起效果
        a.click()
        document.body.removeChild(a)
        loading.close()
      })
    },

1.2.4:对单个用户信息操作
--组件

//获取要操作的行号
<template slot-scope="{ row }">
          <el-button type="text" size="medium" 
          //更新
          click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button type="text" size="medium" @click="openChangePwd(row)">
            修改密码
          </el-button>
          <el-button type="text" size="medium" @click="toggleStatus(row)">
            {{ row.user.status == "ACTIVE" ? "禁用" : "启用" }}
          </el-button>
          <el-button
            v-if="row.contract.status === 'COMMITTED'"
            type="text"
            size="medium"
            @click="handleApproval(row)"
          >
            合同审核
          </el-button>
          <el-button type="text" size="medium" @click="handleChangeLevel(row)">
            修改用户等级
          </el-button>
          <el-button type="text" size="medium" @click="handleChangeRank(row)">
            修改用户积分
          </el-button>
        </template>

任务集管理

 1. 对应页面：task/index.vue
 2. 实现功能：
 2.1：上传任务信息

<div class="upload-box">
        <el-upload
          class="upload"
          drag
          accept=".json"
          action=""
          :file-list="fileList"
          :before-upload="beforeUpload"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传json文件，且不超过100MB</div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showImport = false; fileList = []">取 消</el-button>
        <el-button type="primary" @click="submitImport">确 定</el-button>
      </span>
 <el-dialog
      title="上传任务"
      :visible.sync="showImport"
      width="30%"
    >handleImport() {
      this.showImport = true
    },

 2.1:搜索任务信息

getList() {
      this.listLoading = true
      const { query } = this
      this.formatListQueryEq(this.listQuery, query)
      fetchTaskList(this.listQuery).then(response => {
        const { tasks, total } = response.data
        this.list = tasks
        this.total = total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page_num = 1
      this.getList()
    },

流水线管理平台

1.书籍管理
1.1.对应页面/views/book/index.vue
1.2.功能：
1.2.1.搜索书籍信息
--组件

<el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >

--函数

handleFilter() {
      this.listQuery.page_num = 1;
      this.getList();
    },

1.2.2:新增书籍
 --组件

<el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >

--函数

 handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },

1.2.3批量翻译
--组件

</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 5px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleBatch"
      >

--函数

handleBatch() {
      if (!this.selectBooks.length) {
        this.$notify({
          title: "提示",
          message: "请先选择需要批量翻译的书籍",
          type: "warning",
          duration: 1000
        });
        return;
      }
      this.showBatch = true;
      console.log(this.selectBooks);
    },

1.2.4导入书籍
--组件

 <el-button
        class="filter-item"
        style="margin-left: 5px;"
        type="primary"
        icon="el-icon-edit"
        @click="openImport"
      >

--函数

openImport() {
      this.showImport = true;
    },

1.2.5导出书籍
--组件

<el-button
        class="filter-item"
        style="margin-left: 5px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleExportBook"
      >
        导出书籍
      </el-button>

--函数

handleExportBook() {
      const loading = this.$loading({
        lock: true,
        text: "书籍列表导出中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      fetchBookList({
        page_num: 1,
        page_size: 1000000,
        filter: {
          deleted: {
            $ne: true
          }
        }
      })
        .then(response => {
          const { books } = response.data;
          let bookList = books.map(item => {
            const { id, zh_name, author, tags } = item;
            return {
              书籍ID: id,
              书籍名称: zh_name,
              作者: author,
              标签: tags.join("|")
            };
          });
          const json2csvParser = new Parser();
          const csv = json2csvParser.parse(bookList);
          console.log(csv, "csv");
          const a = document.createElement("a");
          a.href = "data:attachment/csv," + encodeURIComponent(csv);
          a.target = "_blank";
          a.download = `书籍列表.csv`;
          document.body.appendChild(a); // Firefox 中必须这么写，不然不会起效果
          a.click();
          document.body.removeChild(a);
          loading.close();
        })
        .catch(err => {
          loading.close();
        });
    },

2.任务管理
   对应页面task/index.vue
2.1.新增任务
--组件

 <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增任务
      </el-button>

--函数

handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.showProcess = false
      this.bookList = []
      this.chapterList = []
      this.terminologyCollectionList = []
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.submitLoading = false
    },

2.2.搜索任务
--组件

<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">

--函数

handleFilter() {
      this.listQuery.page_num = 1
      this.getList()
    },