feat: add pagiation feature
parent
0596c8a0bb
commit
bb71901452
|
|
@ -11,7 +11,6 @@
|
|||
<template #default="scope">
|
||||
<div class="truncate">{{ scope.row.roleSetting }}</div>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column prop="prologue" label="开场白" />
|
||||
<el-table-column>
|
||||
|
|
@ -20,27 +19,27 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
</ElTable>
|
||||
<div class="flex justify-end mt-2 mr-2 ">
|
||||
<ElPagination background size="small" layout="prev, pager, next" :total="count" />
|
||||
<div class="flex justify-end mt-2 mr-2">
|
||||
<ElPagination v-model:current-page="paginationInfo.currentPage"
|
||||
v-model:page-size="paginationInfo.pageSize" background size="small" layout="sizes,prev, pager, next"
|
||||
:total="count" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="m-4 flex mt-6">
|
||||
<el-row style=" width: 100%;" :gutter="20">
|
||||
<el-row style="width: 100%" :gutter="20">
|
||||
<el-col :span="18">
|
||||
<el-card>
|
||||
<el-form ref="formRef" :model="submitForm" label-width="auto" style="max-width: 1200px"
|
||||
:rules="rules">
|
||||
<el-form-item>
|
||||
<div style="text-align: right;width: 100%;">
|
||||
<el-button type="primary" @click="handleSubmit()">{{ submitForm.id ? '修改' : '添加'
|
||||
<div style="text-align: right; width: 100%">
|
||||
<el-button type="primary" @click="handleSubmit()">{{ submitForm.id ? "修改" : "添加"
|
||||
}}</el-button>
|
||||
<el-button @click="handleBack()">返回</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色背景">
|
||||
待开发...
|
||||
</el-form-item>
|
||||
<el-form-item label="角色背景"> 待开发... </el-form-item>
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input v-model="submitForm.roleName" placeholder="请输入角色名称" />
|
||||
</el-form-item>
|
||||
|
|
@ -56,34 +55,33 @@
|
|||
<el-form-item label="对话示例">
|
||||
<ElButton @click="addChartLines()" type="primary">添加对话</ElButton>
|
||||
<el-row :gutter="20" v-for="(item, index) in submitForm.roleLines" :key="index"
|
||||
style="width: 100%;margin-top: 10px;">
|
||||
style="width: 100%; margin-top: 10px">
|
||||
<el-col :span="12">
|
||||
<ElSelect v-model="item.sender_name" @change="roleLinesChange(index)"
|
||||
style="width: 100%;" placeholder="选择机器人类型">
|
||||
style="width: 100%" placeholder="选择机器人类型">
|
||||
<el-option label="用户" value="用户"></el-option>
|
||||
<el-option :label="submitForm.roleName"
|
||||
:value="submitForm.roleName"></el-option>
|
||||
</ElSelect>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-input v-model="item.text" style="width: 100%;" placeholder="输入对话文本" />
|
||||
<el-input v-model="item.text" style="width: 100%" placeholder="输入对话文本" />
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-icon style="font-size: 20px; cursor: pointer;margin-top: 8px"
|
||||
<el-icon style="font-size: 20px; cursor: pointer; margin-top: 8px"
|
||||
@click="handleRemoveSampleItem(index)">
|
||||
<Remove />
|
||||
</el-icon>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div style="width: 100%;">
|
||||
<div style="width: 100%">
|
||||
<el-input v-model="formatJson" :rows="13" type="textarea" placeholder="粘贴格式化" />
|
||||
<el-button type="primary" style="margin-top: 10px;" @click="handleAutoFormat">自动填充</el-button>
|
||||
<el-button type="primary" style="margin-top: 10px" @click="handleAutoFormat">自动填充</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -91,18 +89,22 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, reactive, watch } from "vue";
|
||||
import { addSystemCharterAPI, querySystemCharterAPI, editSystemCharterAPI } from "@/api/SystemCharter";
|
||||
import { ElButton, ElLoading, ElMessage, ElTable, FormInstance, ElPagination } from "element-plus";
|
||||
import { Remove } from '@element-plus/icons-vue'
|
||||
import { Remove } from "@element-plus/icons-vue";
|
||||
|
||||
const dataSource = ref([]);
|
||||
const paginationInfo = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const count = ref(0);
|
||||
const formRef = ref<FormInstance>();
|
||||
const isAdd = ref(false);
|
||||
|
||||
// 格式化json
|
||||
const formatJson = ref('')
|
||||
const formatJson = ref("");
|
||||
const submitForm = ref();
|
||||
|
||||
const rules = ref({
|
||||
|
|
@ -114,9 +116,13 @@ const rules = ref({
|
|||
|
||||
onMounted(() => {
|
||||
handleReset();
|
||||
initSystemCharterDataSource()
|
||||
initSystemCharterDataSource();
|
||||
});
|
||||
|
||||
watch(() => [paginationInfo.currentPage, paginationInfo.pageSize], () => {
|
||||
initSystemCharterDataSource()
|
||||
})
|
||||
|
||||
const handleReset = () => {
|
||||
submitForm.value = {
|
||||
id: null,
|
||||
|
|
@ -128,94 +134,92 @@ const handleReset = () => {
|
|||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
const addSystemCharter = () => {
|
||||
handleReset()
|
||||
handleReset();
|
||||
isAdd.value = true;
|
||||
};
|
||||
|
||||
const initSystemCharterDataSource = () => {
|
||||
querySystemCharterAPI().then(result => {
|
||||
dataSource.value = result.data
|
||||
count.value = result.meta.total
|
||||
})
|
||||
}
|
||||
querySystemCharterAPI({ current: paginationInfo.currentPage, pageSize: paginationInfo.pageSize }).then((result) => {
|
||||
dataSource.value = result.data;
|
||||
count.value = result.meta.total;
|
||||
});
|
||||
};
|
||||
|
||||
// 添加系统对话
|
||||
const addChartLines = () => {
|
||||
submitForm.value?.roleLines.push({
|
||||
sender_type: null,
|
||||
sender_name: null,
|
||||
text: ''
|
||||
})
|
||||
}
|
||||
text: "",
|
||||
});
|
||||
};
|
||||
|
||||
// 选择了对话类型
|
||||
const roleLinesChange = (index) => {
|
||||
console.error(index);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate(async (valid: any) => {
|
||||
if (valid) {
|
||||
const loading = ElLoading.service()
|
||||
const loading = ElLoading.service();
|
||||
try {
|
||||
const _submitForm = JSON.parse(JSON.stringify(submitForm.value))
|
||||
_submitForm.roleLines = JSON.stringify(_submitForm.roleLines)
|
||||
const _submitForm = JSON.parse(JSON.stringify(submitForm.value));
|
||||
_submitForm.roleLines = JSON.stringify(_submitForm.roleLines);
|
||||
if (!submitForm.value.id) {
|
||||
await addSystemCharterAPI(_submitForm);
|
||||
ElMessage.success('添加成功')
|
||||
ElMessage.success("添加成功");
|
||||
} else {
|
||||
await editSystemCharterAPI(_submitForm);
|
||||
ElMessage.success('修改成功')
|
||||
ElMessage.success("修改成功");
|
||||
}
|
||||
|
||||
initSystemCharterDataSource()
|
||||
isAdd.value = false
|
||||
initSystemCharterDataSource();
|
||||
isAdd.value = false;
|
||||
} finally {
|
||||
loading.close()
|
||||
loading.close();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemoveSampleItem = (index) => {
|
||||
submitForm.value.roleLines.splice(index, 1)
|
||||
ElMessage.success('删除成功')
|
||||
}
|
||||
submitForm.value.roleLines.splice(index, 1);
|
||||
ElMessage.success("删除成功");
|
||||
};
|
||||
|
||||
const handleEdit = (row) => {
|
||||
handleReset();
|
||||
const _currentRow = JSON.parse(JSON.stringify(row))
|
||||
Object.keys(submitForm.value).forEach(key => {
|
||||
if (key === 'roleLines') {
|
||||
submitForm.value[key] = JSON.parse(_currentRow[key])
|
||||
const _currentRow = JSON.parse(JSON.stringify(row));
|
||||
Object.keys(submitForm.value).forEach((key) => {
|
||||
if (key === "roleLines") {
|
||||
submitForm.value[key] = JSON.parse(_currentRow[key]);
|
||||
} else {
|
||||
submitForm.value[key] = _currentRow[key]
|
||||
submitForm.value[key] = _currentRow[key];
|
||||
}
|
||||
})
|
||||
isAdd.value = true
|
||||
}
|
||||
});
|
||||
isAdd.value = true;
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
isAdd.value = false
|
||||
}
|
||||
isAdd.value = false;
|
||||
};
|
||||
|
||||
// 自动填充
|
||||
const handleAutoFormat = () => {
|
||||
const loading = ElLoading.service()
|
||||
const loading = ElLoading.service();
|
||||
try {
|
||||
const object = JSON.parse(formatJson.value)
|
||||
const roleName = object.reply_constraints.sender_name
|
||||
const roleSettingItem = object.bot_setting.find(item => item.bot_name.trim() == roleName.trim())
|
||||
const sampleMessages = object.sample_messages.map(item => {
|
||||
const object = JSON.parse(formatJson.value);
|
||||
const roleName = object.reply_constraints.sender_name;
|
||||
const roleSettingItem = object.bot_setting.find((item) => item.bot_name.trim() == roleName.trim());
|
||||
const sampleMessages = object.sample_messages.map((item) => {
|
||||
return {
|
||||
sender_type: item.sender_type,
|
||||
sender_name: item.sender_type == 'BOT' ? roleName : item.sender_name,
|
||||
sender_name: item.sender_type == "BOT" ? roleName : item.sender_name,
|
||||
text: item.text,
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
submitForm.value = {
|
||||
id: null,
|
||||
roleName: roleName,
|
||||
|
|
@ -224,12 +228,12 @@ const handleAutoFormat = () => {
|
|||
intro: "", // 开场白
|
||||
roleLines: sampleMessages,
|
||||
};
|
||||
formatJson.value = ''
|
||||
ElMessage.success('格式化成功')
|
||||
formatJson.value = "";
|
||||
ElMessage.success("格式化成功");
|
||||
} catch {
|
||||
ElMessage.error('格式化失败')
|
||||
ElMessage.error("格式化失败");
|
||||
} finally {
|
||||
loading.close()
|
||||
loading.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue