Skip to content

F
fk-spider-web
Commit d6d735c4 by yzh
Options

feat：完成了任务信息与系统管理的对话框组件。

parent c4c362d6
Showing with 424 additions and 113 deletions
src/components/Delete/index.vue
<template>
<el-dialog
v-model="dialogVisible"
title="Tips"
width="500"
:before-close="handleClose"
>
<span>This is a message</span>
<el-dialog v-model="deleteDialogVisible" title="删除" width="250" center align-center @close="close" draggable>
<div class="text-center">
<span style="color: #fff;font-size: 15px;">确定删除吗？</span>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">
Confirm
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="handleDelelte">
确定
</el-button>
</div>
</template>
......@@ -18,18 +15,41 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { ref, watch } from 'vue'
import { defineProps } from 'vue';
const dialogVisible = ref(false)
const props = defineProps({
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
}
})
const emit = defineEmits(['update:dialogVisible', 'confirm'])
const deleteDialogVisible = ref(props.dialogVisible)
const handleClose = (done: () => void) => {
ElMessageBox.confirm('Are you sure to close this dialog?')
.then(() => {
done()
})
.catch(() => {
// catch error
})
// 删除方法
const handleDelelte = () => {
emit('confirm')
deleteDialogVisible.value = false
}
// 关闭弹窗的方法
const close = () => {
deleteDialogVisible.value = false
}
// 监听父组件传过来的值
watch(() => props.dialogVisible,
(newVal) => {
deleteDialogVisible.value = newVal
}
)
// 监听组件内的值并向父组件更新
watch(() => deleteDialogVisible.value,
(newVal) => {
emit('update:dialogVisible', newVal)
}
)
</script>
\ No newline at end of file
src/views/os-spiderManager/index.vue
<template>
<div class="mt-20">
</div>
<div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
......@@ -17,52 +16,16 @@
</el-table-column>
</el-table>
</div>
<div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
const errorValue = ref('')
const taskValue = ref('')
const timeValue = ref('')
const searchInput = ref('')
const targetOptions = [
{
value: 'task1',
label: 'sk网',
},
{
value: 'task2',
label: 'nasa网',
},
{
value: 'task3',
label: '网',
},
]
const resOptions = [
{
value: 'task1',
label: '网络中断',
},
{
value: 'task2',
label: '地址不存在',
},
{
value: 'task3',
label: '反爬虫',
},
]
const tableData = ref([
{
name: '1',
......@@ -114,14 +77,14 @@ const pageObj = ref({
const handleDetails = (row: any) => {
console.log(row);
}
const handleConfirm = (row: any) => {
console.log(row);
}
const getData = () => {
console.log('getData');
}
</script>
<style scoped></style>
<style scoped>
/* 去除按钮边框 */
.el-button:focus {
outline: none;
}
</style>
src/views/os-system/components/addUserDialog.vue 0 → 100644
<template>
<el-dialog v-model="currentVisible" :title="currentMode === '1' ? '新增用户' : '编辑用户'" width="610" center align-center @close="handleClose" draggable>
<el-form :inline="true">
<el-form-item label="用户账号:">
<el-input v-model="taskName" />
</el-form-item>
<el-form-item label="用户名称:">
<el-input v-model="taskFrequency" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<el-form :inline="true">
<el-form-item label="用户备注:">
<el-input v-model="taskName" />
</el-form-item>
<el-form-item label="用户密码:">
<el-input v-model="taskFrequency" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleConfirm">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { defineProps } from 'vue';
import { watch } from 'vue'
const props = defineProps({
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: 'add'
},
userCount: {
type: String,
default: ''
},
userName: {
type: String,
default: ''
},
userRemark: {
type: String,
default: false
},
userPassword: {
type: String,
default: ''
}
})
// 向父组件传递dialog值
const emit = defineEmits(['update:dialogVisible', 'confirm'])
// 组件的状态
const currentVisible = ref(props.dialogVisible)
const currentMode = ref(props.mode)
const taskName = ref('')
const taskFrequency = ref('')
// 关闭的方法
const handleClose = () => {
currentVisible.value = false
}
// 确定的方法
const handleConfirm = () => {
emit('confirm')
currentVisible.value = false
}
// 监听props变化，同步给组件内部
watch(() => props.dialogVisible,
(newVal) => {
currentVisible.value = newVal
}
)
// 监听组件内部状态变化，同步给父组件，这样才能做到控制对话框组件的显隐
watch(() => currentVisible.value,
(newVal) => {
emit('update:dialogVisible', newVal)
}
)
watch(() => props.mode,
(newVal) => {
currentMode.value = newVal
}
)
</script>
<style>
/* 修改弹窗样式 */
.el-dialog {
background: transparent;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: #ffffff;
.el-dialog__title {
color: #ffffff;
}
}
/* 修改表单样式 */
.el-form {
.el-form-item__label {
color: #ffffff;
}
}
</style>
src/views/os-system/index.vue
......@@ -2,14 +2,14 @@
<div class="text-left p-8">
<el-form inline>
<el-form-item>
<el-button type="primary" plain>创建用户</el-button>
<el-button type="primary" plain @click="openAddUserDialog">创建用户</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" plain>批量删除</el-button>
<el-button type="danger" plain @click="handleConfirm">批量删除</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' } "
<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :row-style="{ height: '58px' }">
<el-table-column type="selection" width="40" />
<el-table-column property="name" label="序号" width="55" />
......@@ -33,29 +33,25 @@
<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
@pagination="getData" />
</div>
<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode" />
<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :user-count="userCount" :user-name="userName"
:user-remark="userRemark" :user-password="userPassword " @confirm="handleConfirm" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import deleteDialog from '@/components/Delete/index.vue'
import addUserDialog from './components/addUserDialog.vue'
const errorValue = ref('')
const taskValue = ref('')
const timeValue = ref('')
const searchInput = ref('')
const rolesOptions = [
{
value: 'task1',
label: '管理员',
},
{
value: 'task2',
label: '用户',
},
]
const userCount = ref('')
const userName = ref('')
const userRemark = ref('')
const userPassword = ref('')
const showDeleteDialog = ref(false)
const deleteMode = ref('2')
const dialogVisible = ref(false)
const mode = ref('1')
const tableData = ref([
{
name: '1',
......@@ -94,16 +90,48 @@ const pageObj = ref({
pageNo: 1
})
const handleDetails = (row: any) => {
mode.value = '2'
// userCount.value = row.name
// userName.value = row.name
// userRemark.value = row.name
// userPassword.value = row.name
dialogVisible.value = true
console.log(row);
}
const handleConfirm = (row: any) => {
console.log(row);
showDeleteDialog.value = true
}
const getData = () => {
console.log('getData');
}
const handleDeleteConfirm = () => {
}
const openAddUserDialog = () => {
mode.value = '1'
dialogVisible.value = true
}
</script>
<style scoped></style>
<style scoped>
/* 去除按钮边框 */
.el-button:focus {
outline: none;
}
</style>
<style>
/* 修改弹窗样式 */
.el-dialog {
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.el-dialog__title {
color: #ffffff;
}
}
</style>
src/views/os-taskInformation/components/addTaskDialog.vue 0 → 100644
<template>
<el-dialog v-model="currentVisible" title="新增" width="610" center align-center @close="handleClose" draggable>
<el-form :inline="true" v-if="currentMode === '1'">
<el-form-item label="任务名称:">
<el-input v-model="taskName" placeholder="请输入任务名称" />
</el-form-item>
<el-form-item label="执行时间:">
<el-input v-model="taskFrequency" placeholder="请输入执行时间" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<el-form :inline="true">
<el-form-item label="所属爬虫:">
<el-select v-model="spiderTypeValue" placeholder="请选择爬虫类型" style="width: 183px">
<el-option v-for="item in spiderTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="执行频率:">
<el-input v-model="taskFrequency" placeholder="请输入执行频率" />
</el-form-item>
</el-form>
<div class="m-t-4">
</div>
<el-form :inline="true">
<el-form-item label="启用/停止:">
<el-switch v-model="taskSwitchValue" class="ml-2"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleConfirm">
确定
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { defineProps } from 'vue';
import { watch } from 'vue'
const props = defineProps({
dialogVisible: {
type: Boolean,
default: false
},
mode: {
type: String,
default: '1'
},
spiderType: {
type: String,
default: ''
},
frequency: {
type: String,
default: ''
},
taskStatus: {
type: Boolean,
default: false
}
})
// 向父组件传递dialog值
const emit = defineEmits(['update:dialogVisible', 'confirm'])
// 组件的状态
const currentVisible = ref(props.dialogVisible)
const currentMode = ref(props.mode)
const taskName = ref('')
const taskFrequency = ref('')
const taskSwitchValue = ref(false)
const spiderTypeValue = ref('')
const spiderTypeOptions = ref([
{
value: '选项1',
label: 'DSN爬虫'
},
{
value: '选项2',
label: 'ITU爬虫'
},
{
value: '选项3',
label: 'ST爬虫'
},
])
// 关闭的方法
const handleClose = () => {
currentVisible.value = false
}
// 确定的方法
const handleConfirm = () => {
emit('confirm')
currentVisible.value = false
}
// 监听props变化，同步给组件内部
watch(() => props.dialogVisible,
(newVal) => {
currentVisible.value = newVal
}
)
// 监听组件内部状态变化，同步给父组件，这样才能做到控制对话框组件的显隐
watch(() => currentVisible.value,
(newVal) => {
emit('update:dialogVisible', newVal)
}
)
watch(() => props.mode,
(newVal) => {
currentMode.value = newVal
}
)
</script>
<style>
/* 修改弹出框样式 */
.el-dialog {
background: transparent;
background-image: url("@/assets/picture/dialog1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
color: #ffffff;
.el-dialog__title {
color: #ffffff;
}
}
/* 修改表单样式 */
.el-form {
.el-form-item__label {
color: #ffffff;
}
}
</style>
src/views/os-taskInformation/components/taskCard.vue
......@@ -8,9 +8,9 @@
</div>
<div class="flex justify-center">
<el-form-item>
<el-button type="primary">编辑</el-button>
<el-button type="primary" @click="editTask">编辑</el-button>
<el-button type="success">执行记录</el-button>
<el-button type="danger">删除</el-button>
<el-button type="danger" @click="deleteTask">删除</el-button>
</el-form-item>
</div>
<div class="wordStyle flex justify-center">
......@@ -38,13 +38,18 @@
</el-space>
</el-form-item>
</div>
</div>
<deleteDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleDeleteConfirm" @mode="deleteMode"/>
<addTaskDialog v-model:dialogVisible="showTaskDialog" @confirm="handleEdit" :mode="editMode" />
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import deleteDialog from '@/components/Delete/index.vue'
import addTaskDialog from './addTaskDialog.vue'
defineProps({
successTask: {
type: String,
......@@ -59,6 +64,10 @@ defineProps({
default: ''
}
})
const editMode = ref('')
const deleteMode = ref('1')
const showDeleteDialog = ref(false)
const showTaskDialog = ref(false)
const taskSwitch = ref(false)
const options = [
{
......@@ -86,9 +95,25 @@ const options = [
label: '近一月',
},
]
const deleteTask = () => {
deleteMode.value = '1'
showDeleteDialog.value = true
}
const editTask = () => {
editMode.value = '2'
showTaskDialog.value = true
}
const handleEdit = () => {
}
const handleDeleteConfirm = () => {
}
</script>
<style lang="scss" scoped>
// 任务卡片样式
.taskCard {
background-image: url("@/assets/picture/box2.png");
background-size: 100% 100%;
......@@ -111,7 +136,7 @@ const options = [
}
}
// 去除按钮边框
.el-button:focus {
outline: none;
}
......
src/views/os-taskInformation/index.vue
......@@ -28,7 +28,7 @@
</el-form-item>
<el-form-item>
<el-space>
<el-button type="primary">新建任务</el-button>
<el-button type="primary" @click="openTaskDialog">新建任务</el-button>
</el-space>
</el-form-item>
</el-form>
......@@ -41,18 +41,19 @@
@pagination="getData" />
</div>
</div>
<addTaskDialog v-model:dialogVisible="showDialog" @confirm="handleDeleteConfirm" :mode="editMode" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import Pagination from '@/components/pagination/index.vue'
import taskCard from './components/taskCard.vue'
import addTaskDialog from './components/addTaskDialog.vue'
const errorValue = ref('')
const editMode = ref('1')
const taskValue = ref('')
const timeValue = ref('')
const searchInput = ref('')
const taskOptions = [
{
value: 'task1',
......@@ -67,18 +68,6 @@ const taskOptions = [
label: '网',
},
]
const tableData = ref([
{
name: '1',
address: 'sk网',
address1: '成功',
address2: '100',
address3: '0',
address4: '无',
address5: '10s',
address6: '2023-05-13 10:00:00',
}
])
const pageObj = ref({
total: 10,
pageSize: 10,
......@@ -87,9 +76,22 @@ const pageObj = ref({
const getData = () => {
console.log('getData');
}
// 控制对话框显示/隐藏的状态变量
const showDialog = ref(false)
// 处理删除确认
const handleDeleteConfirm = () => {
console.log('用户确认删除')
// 在这里执行实际的删除操作
}
const openTaskDialog = () => {
showDialog.value = true
}
</script>
<style scoped>
/* 卡片样式 */
.cardStyle {
display: flex;
flex-wrap: wrap;
......@@ -98,20 +100,21 @@ const getData = () => {
padding: 8px;
height: 26vh;
}
/* 文本样式 */
.el-text {
color: #FFFFFF;
}
/* 工具栏样式 */
.toolbarStyle {
background-image: url("@/assets/picture/box3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/* 表单样式 */
.formStyle {
display: flex;
justify-content: space-around;
margin-top: 1%;
padding: 3px;
}
</style>
......@@ -145,10 +148,10 @@ const getData = () => {
}
/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover{
color:#409eff;
.el-select-dropdown__item:hover {
color: #409eff;
}
/* 去除按钮边框 */
.el-button:focus {
outline: none;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment