|
|
@@ -1,4 +1,4 @@
|
|
|
-<script setup lang="ts">
|
|
|
+<script lang="ts" setup>
|
|
|
/**
|
|
|
* @Name: root-word-manage-table.vue
|
|
|
* @Description: 词根管理表格
|
|
|
@@ -12,6 +12,7 @@ import type { UploadInstance, UploadRawFile } from 'element-plus';
|
|
|
import { ElMessage, FormInstance, FormRules, genFileId } from 'element-plus';
|
|
|
import { SUCCESS_CODE, WARNING_CODE } from '/@/utils/requestCode';
|
|
|
|
|
|
+
|
|
|
interface DataItem {
|
|
|
id: number;
|
|
|
modifier_name: string;
|
|
|
@@ -44,11 +45,11 @@ const formSearchTermInpRef = ref();
|
|
|
const ruleFormRef = ref<FormInstance>();
|
|
|
const ruleForm = reactive({
|
|
|
searchTerm: '',
|
|
|
- searchTermType: 'positive',
|
|
|
+ searchTermType: 'positive'
|
|
|
});
|
|
|
const rules = reactive<FormRules<typeof ruleForm>>({
|
|
|
- searchTerm: [{ required: true, validator: checkSearchTerm, trigger: 'blur' }],
|
|
|
- searchTermType: [{ required: true, validator: checkSearchTermType, trigger: 'blur' }],
|
|
|
+ searchTerm: [ { required: true, validator: checkSearchTerm, trigger: 'blur' } ],
|
|
|
+ searchTermType: [ { required: true, validator: checkSearchTermType, trigger: 'blur' } ]
|
|
|
});
|
|
|
|
|
|
const searchTermTypeFilter = ref('all');
|
|
|
@@ -66,7 +67,7 @@ async function addSearchTerm() {
|
|
|
const body = {
|
|
|
searchTerm: ruleForm.searchTerm,
|
|
|
searchTerm_type: ruleForm.searchTermType,
|
|
|
- add_date: currentDate, // 使用当前日期代替硬编码日期
|
|
|
+ add_date: currentDate // 使用当前日期代替硬编码日期
|
|
|
};
|
|
|
try {
|
|
|
const response = await api.postCreateSearchTerm(body);
|
|
|
@@ -105,7 +106,7 @@ async function fetchSearchTermList() {
|
|
|
page: currentPage.value,
|
|
|
limit: pageSize.value,
|
|
|
searchTerm: searchTermFilter.value,
|
|
|
- searchTerm_type: searchTermTypeFilter.value,
|
|
|
+ searchTerm_type: searchTermTypeFilter.value
|
|
|
};
|
|
|
try {
|
|
|
const response = await api.getSearchTermList(query);
|
|
|
@@ -115,7 +116,7 @@ async function fetchSearchTermList() {
|
|
|
...item,
|
|
|
isEditing: false,
|
|
|
popConfirmVisible: false,
|
|
|
- tempSearchTermType: item.searchTerm_type,
|
|
|
+ tempSearchTermType: item.searchTerm_type
|
|
|
}));
|
|
|
} catch (error) {
|
|
|
console.error('==Error==', error);
|
|
|
@@ -134,7 +135,7 @@ async function updateSearchTerm(row: any) {
|
|
|
row.isEditing = false;
|
|
|
const data = {
|
|
|
searchTerm: row.searchTerm,
|
|
|
- searchTerm_type: row.searchTerm_type,
|
|
|
+ searchTerm_type: row.searchTerm_type
|
|
|
};
|
|
|
try {
|
|
|
const response = await api.postUpdateSearchTerm({ data, id: row.id });
|
|
|
@@ -156,7 +157,7 @@ async function updateSearchTerm(row: any) {
|
|
|
async function updateSearchTermType(row: any) {
|
|
|
const data = {
|
|
|
searchTerm: row.searchTerm,
|
|
|
- searchTerm_type: row.searchTerm_type,
|
|
|
+ searchTerm_type: row.searchTerm_type
|
|
|
};
|
|
|
try {
|
|
|
const response = await api.postUpdateSearchTerm({ data, id: row.id });
|
|
|
@@ -311,48 +312,48 @@ function handleResponse(response: any) {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="p-2.5" v-loading="tableLoading" style="background-color: #f7f7f7">
|
|
|
+ <div v-loading="tableLoading" class="p-2.5" style="background-color: #f7f7f7">
|
|
|
<!-- 筛选 -->
|
|
|
<el-card body-class="flex justify-between gap-3.5" shadow="hover" style="border: none; margin-bottom: 10px">
|
|
|
<div class="flex gap-7">
|
|
|
<div>
|
|
|
<span class="font-bold mr-2" style="color: #303133">词根:</span>
|
|
|
<el-input
|
|
|
- v-model="searchTermFilter"
|
|
|
- placeholder="请输入词根"
|
|
|
- clearable
|
|
|
- @change="fetchSearchTermList"
|
|
|
- :prefix-icon="Search"
|
|
|
- style="width: 240px"></el-input>
|
|
|
+ v-model="searchTermFilter"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入词根"
|
|
|
+ style="width: 240px"
|
|
|
+ @change="fetchSearchTermList"></el-input>
|
|
|
</div>
|
|
|
<div>
|
|
|
<span class="font-bold mr-2" style="color: #303133">词根类型:</span>
|
|
|
<el-select v-model="searchTermTypeFilter" style="width: 200px" @change="fetchSearchTermList">
|
|
|
- <el-option label="全部" value="all" />
|
|
|
- <el-option label="positive" value="positive" />
|
|
|
- <el-option label="negative" value="negative" />
|
|
|
- <el-option label="无词根类型" value="typeless" />
|
|
|
+ <el-option label="全部" value="all"/>
|
|
|
+ <el-option label="positive" value="positive"/>
|
|
|
+ <el-option label="negative" value="negative"/>
|
|
|
+ <el-option label="无词根类型" value="typeless"/>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="flex gap-3.5">
|
|
|
<el-button plain type="primary" @click="handleDialogVisible">
|
|
|
<el-icon>
|
|
|
- <Plus />
|
|
|
+ <Plus/>
|
|
|
</el-icon>
|
|
|
添加词根
|
|
|
</el-button>
|
|
|
<!-- 想要不页面不跳动可以加72的高度 -->
|
|
|
<div>
|
|
|
<el-upload
|
|
|
- ref="upload"
|
|
|
- action="#"
|
|
|
- :limit="1"
|
|
|
- :auto-upload="true"
|
|
|
- :on-exceed="handleExceed"
|
|
|
- :http-request="handleCustomUpload">
|
|
|
+ ref="upload"
|
|
|
+ :auto-upload="true"
|
|
|
+ :http-request="handleCustomUpload"
|
|
|
+ :limit="1"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ action="#">
|
|
|
<template #trigger>
|
|
|
- <el-button plain round type="warning" :icon="Upload">批量词根上传</el-button>
|
|
|
+ <el-button :icon="Upload" plain round type="warning">批量词根上传</el-button>
|
|
|
</template>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
@@ -362,10 +363,15 @@ function handleResponse(response: any) {
|
|
|
<el-card shadow="hover" style="border: none">
|
|
|
<div style="height: 800px">
|
|
|
<el-table :data="tableData" height="800" stripe style="width: 100%">
|
|
|
- <el-table-column fixed prop="add_date" label="添加日期" width="180" sortable>
|
|
|
+ <el-table-column align="center" type="index" width="60">
|
|
|
+ <template #header>
|
|
|
+ <span>序号</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="添加日期" prop="add_date" sortable>
|
|
|
<template #header>
|
|
|
<el-icon style="top: 2px; margin-right: 3px">
|
|
|
- <Calendar />
|
|
|
+ <Calendar/>
|
|
|
</el-icon>
|
|
|
<span>添加日期</span>
|
|
|
</template>
|
|
|
@@ -373,35 +379,35 @@ function handleResponse(response: any) {
|
|
|
<span class="font-medium">{{ row.add_date }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="searchTerm" label="词根" sortable>
|
|
|
+ <el-table-column label="词根" prop="searchTerm" sortable>
|
|
|
<template #header>
|
|
|
<el-icon style="top: 2px; right: 2px">
|
|
|
- <Key />
|
|
|
+ <Key/>
|
|
|
</el-icon>
|
|
|
<span>词根</span>
|
|
|
</template>
|
|
|
<template #default="{ row }">
|
|
|
- <el-input ref="searchTermInpRef" v-if="row.isEditing" v-model="row.searchTerm" @change="updateSearchTerm(row)" />
|
|
|
- <span class="font-semibold" v-else>{{ row.searchTerm }}</span>
|
|
|
+ <el-input v-if="row.isEditing" ref="searchTermInpRef" v-model="row.searchTerm" @change="updateSearchTerm(row)"/>
|
|
|
+ <span v-else class="font-semibold">{{ row.searchTerm }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="searchTerm_type" label="词根类型" sortable>
|
|
|
+ <el-table-column label="词根类型" prop="searchTerm_type" sortable>
|
|
|
<template #header>
|
|
|
<el-icon style="top: 2px; right: 2px">
|
|
|
- <Coin />
|
|
|
+ <Coin/>
|
|
|
</el-icon>
|
|
|
<span>词根类型</span>
|
|
|
</template>
|
|
|
<template #default="{ row }">
|
|
|
<el-popconfirm
|
|
|
- title="确定修改吗?"
|
|
|
- @confirm="updateSearchTermType(row)"
|
|
|
- @cancel="cancelUpdate(row)"
|
|
|
- :visible="row.popConfirmVisible">
|
|
|
+ :visible="row.popConfirmVisible"
|
|
|
+ title="确定修改吗?"
|
|
|
+ @cancel="cancelUpdate(row)"
|
|
|
+ @confirm="updateSearchTermType(row)">
|
|
|
<template #reference>
|
|
|
- <el-select v-model="row.searchTerm_type" @change="showPopConfirm(row)" style="width: 150px">
|
|
|
- <el-option label="positive" value="positive" />
|
|
|
- <el-option label="negative" value="negative" />
|
|
|
+ <el-select v-model="row.searchTerm_type" style="width: 150px" @change="showPopConfirm(row)">
|
|
|
+ <el-option label="positive" value="positive"/>
|
|
|
+ <el-option label="negative" value="negative"/>
|
|
|
</el-select>
|
|
|
</template>
|
|
|
</el-popconfirm>
|
|
|
@@ -410,16 +416,16 @@ function handleResponse(response: any) {
|
|
|
<el-table-column fixed="right" label="操作" width="120">
|
|
|
<template #header>
|
|
|
<el-icon style="top: 2px; margin-right: 5px">
|
|
|
- <EditPen />
|
|
|
+ <EditPen/>
|
|
|
</el-icon>
|
|
|
<span>操作</span>
|
|
|
</template>
|
|
|
<template #default="{ row }">
|
|
|
- <el-button link type="primary" size="small" @click="handleClick(row)" v-if="!row.isEditing"> 编辑</el-button>
|
|
|
- <el-button link type="primary" size="small" @click="handleClick(row)" v-else> 取消</el-button>
|
|
|
+ <el-button v-if="!row.isEditing" link size="small" type="primary" @click="handleClick(row)"> 编辑</el-button>
|
|
|
+ <el-button v-else link size="small" type="primary" @click="handleClick(row)"> 取消</el-button>
|
|
|
<el-popconfirm title="确定删除吗?" @confirm="handleDelete(row)">
|
|
|
<template #reference>
|
|
|
- <el-button link type="danger" size="small">删除</el-button>
|
|
|
+ <el-button link size="small" type="danger">删除</el-button>
|
|
|
</template>
|
|
|
</el-popconfirm>
|
|
|
</template>
|
|
|
@@ -428,27 +434,27 @@ function handleResponse(response: any) {
|
|
|
</div>
|
|
|
<div class="mt-3.5 flex justify-end">
|
|
|
<el-pagination
|
|
|
- v-model:current-page="currentPage"
|
|
|
- v-model:page-size="pageSize"
|
|
|
- :page-sizes="[20, 40, 50, 100]"
|
|
|
- layout="total, sizes, prev, pager, next"
|
|
|
- :total="total"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange" />
|
|
|
+ v-model:current-page="currentPage"
|
|
|
+ v-model:page-size="pageSize"
|
|
|
+ :page-sizes="[20, 40, 50, 100]"
|
|
|
+ :total="total"
|
|
|
+ layout="total, sizes, prev, pager, next"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"/>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
|
|
|
<!-- 添加词根弹窗 -->
|
|
|
- <el-dialog v-model="dialogVisible" title="添加关键词" width="500" :before-close="handleClose">
|
|
|
- <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules" label-width="auto">
|
|
|
+ <el-dialog v-model="dialogVisible" :before-close="handleClose" title="添加关键词" width="500">
|
|
|
+ <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" status-icon style="max-width: 600px">
|
|
|
<el-form-item label="关键词" prop="searchTerm">
|
|
|
- <el-input ref="formSearchTermInpRef" v-model="ruleForm.searchTerm" />
|
|
|
+ <el-input ref="formSearchTermInpRef" v-model="ruleForm.searchTerm"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="关键词类型" prop="searchTermType">
|
|
|
<el-select v-model="ruleForm.searchTermType">
|
|
|
- <el-option label="positive" value="positive" />
|
|
|
- <el-option label="negative" value="negative" />
|
|
|
+ <el-option label="positive" value="positive"/>
|
|
|
+ <el-option label="negative" value="negative"/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
