This commit is contained in:
2023-06-08 21:09:28 +08:00
parent d778ceab61
commit f8947d332a
158 changed files with 17210 additions and 259 deletions

View File

@@ -0,0 +1,112 @@
<template>
<a-form class="w-full md:w-full mt-3" :model="password" @submit="modifyPassword">
<a-form-item
label="旧密码"
field="oldPassword"
label-col-flex="80px"
:rules="[{ required: true, message: '旧密码必填' }]"
>
<a-input-password v-model="password.oldPassword" allow-clear autocomplete="off" />
</a-form-item>
<a-form-item
label="新密码"
field="newPassword"
label-col-flex="80px"
:rules="[{ required: true, message: '新密码必填' }]"
>
<a-input-password
v-model="password.newPassword"
@input="checkSafe"
@clear="() => (passwordSafePercent = 0)"
autocomplete="off"
allow-clear
/>
</a-form-item>
<a-form-item label="密码安全" label-col-flex="80px">
<a-progress :steps="3" status="success" :percent="passwordSafePercent" animation :show-text="false" />
</a-form-item>
<a-form-item
label="确认密码"
field="newPassword_confirmation"
label-col-flex="80px"
:rules="[{ required: true, message: '确认密码必填' }]"
>
<a-input-password allow-clear v-model="password.newPassword_confirmation" autocomplete="off" />
</a-form-item>
<a-form-item label-col-flex="80px">
<a-button html-type="submit" type="primary">保存</a-button>
</a-form-item>
</a-form>
<a-modal v-model:visible="visible" @ok="resetLogin">
<template #title>提示</template>
密码已经修改成功需要重新登录系统点击确定跳转登录页面
</a-modal>
</template>
<script setup>
import { ref, reactive } from "vue"
import { Message } from "@arco-design/web-vue"
import user from "@/api/system/user"
import tool from "@/utils/tool"
const password = reactive({
oldPassword: "",
newPassword: "",
newPassword_confirmation: ""
})
const visible = ref(false)
const passwordSafePercent = ref(0)
const resetLogin = () => {
window.location.href = "/"
}
const modifyPassword = async (data) => {
if (!data.errors) {
if (data.values.newPassword !== data.values.newPassword_confirmation) {
Message.error("确认密码与新密码不一致")
return
}
Message.success("修改密码成功!")
// const response = await user.modifyPassword(data.values)
// if (response.success) {
// tool.local.clear()
// visible.value = true
// } else {
// Message.error(response.message)
// }
}
}
const checkSafe = (password) => {
if (password.length < 1) {
passwordSafePercent.value = 0
return
}
if (!(password.length >= 6)) {
passwordSafePercent.value = 0
return
}
passwordSafePercent.value = 0.1
if (/\d/.test(password)) {
passwordSafePercent.value += 0.1
}
if (/[a-z]/.test(password)) {
passwordSafePercent.value += 0.1
}
if (/[A-Z]/.test(password)) {
passwordSafePercent.value += 0.3
}
if (/[`~!@#$%^&*()_+<>?:"{},./;'[\]]/.test(password)) {
passwordSafePercent.value += 0.4
}
}
</script>

View File

@@ -0,0 +1,40 @@
<template>
<a-form class="w-full md:w-full mt-3" :model="userInfo" @submit="modifyInfo">
<a-form-item label="账户名" label-col-flex="80px">
<a-input disabled :default-value="userInfo.username" allow-clear />
</a-form-item>
<a-form-item label="名称" label-col-flex="80px">
<a-input v-model="userInfo.name" allow-clear />
</a-form-item>
<a-form-item label="手机" label-col-flex="80px">
<a-input v-model="userInfo.phone" allow-clear />
</a-form-item>
<a-form-item label="邮箱" label-col-flex="80px">
<a-input v-model="userInfo.email" allow-clear />
</a-form-item>
<a-form-item label="个人签名" label-col-flex="80px">
<a-textarea v-model="userInfo.introduction" :max-length="255" class="h-28" show-word-limit allow-clear />
</a-form-item>
<a-form-item label-col-flex="80px">
<a-button html-type="submit" type="primary">保存</a-button>
</a-form-item>
</a-form>
</template>
<script setup>
import { reactive } from "vue"
import { useUserStore } from "@/store"
import { Message } from "@arco-design/web-vue"
// import user from "@/api/system/user"
const userStore = useUserStore()
const userInfo = reactive({
...userStore.$state
})
const modifyInfo = async (data) => {
// 注意要用values
console.log(data.values);
Message.success("模拟请求成功,后续写接口")
}
</script>

View File

@@ -0,0 +1,82 @@
<template>
<div class="block">
<div class="user-header rounded-sm text-center">
<div class="pt-3 mx-auto avatar-box">
<ma-upload rounded></ma-upload>
</div>
<div>
<a-tag size="large" class="mt-3 rounded-full" color="#de53ff">
{{ userStore.role }}
</a-tag>
</div>
</div>
<a-layout-content class="block lg:flex lg:justify-between">
<div class="ma-content-block w-full lg:w-6/12 mt-3 p-4">
<a-tabs type="rounded">
<a-tab-pane key="info" title="个人资料">
<user-infomation />
</a-tab-pane>
<a-tab-pane key="safe" title="安全设置">
<editpassword />
</a-tab-pane>
</a-tabs>
</div>
<div class="ma-content-block w-full lg:w-6/12 mt-3 p-4 ml-0 lg:ml-3">
<a-tabs type="rounded">
<a-tab-pane key="login-log" title="登录日志">
<a-timeline class="pl-5 mt-3">
<a-timeline-item
:label="`地理位置;${item.ip_location},操作系统:${item.os}`"
v-for="(item, idx) in loginLogList"
:key="idx"
>
您于 {{ item.login_time }} 登录系统{{ item.message }}
</a-timeline-item>
</a-timeline>
</a-tab-pane>
<a-tab-pane key="operation-log" title="操作日志">
<a-timeline class="pl-5 mt-3">
<a-timeline-item
:label="`地理位置;${item.ip_location},方式:${item.method},路由:${item.router}`"
v-for="(item, idx) in operationLogList"
:key="idx"
>
您于 {{ item.created_at }} 执行了 {{ item.service_name }}
</a-timeline-item>
</a-timeline>
</a-tab-pane>
</a-tabs>
</div>
</a-layout-content>
</div>
</template>
<script setup>
import { ref } from "vue"
import MaUpload from "@cps/ma-upload/index.vue"
import userInfomation from "./components/userInfo.vue"
import editpassword from "./components/editpassword.vue"
import { useUserStore } from "@/store"
const userStore = useUserStore()
const loginLogList = ref([
{ ip_location: "成都", os: "window10", login_time: "2023-6-6", message: "更新了xxx项目" },
{ ip_location: "成都", os: "window10", login_time: "2023-6-5", message: "更新了xxx项目" }
])
const operationLogList = ref([
{ ip_location: "四川省-成都市", method: "POST", router: "/demo/update", created_at: "2023-06-06 17:05:08",service_name:"问答历史" },
{ ip_location: "四川省-成都市", method: "POST", router: "/demo/update", created_at: "2023-06-06 17:05:08",service_name:"问答历史" },
{ ip_location: "四川省-成都市", method: "POST", router: "/demo/update", created_at: "2023-06-06 17:05:08",service_name:"问答历史" },
])
</script>
<style scoped>
.avatar-box {
width: 130px;
}
.user-header {
width: 100%;
height: 200px;
background: url("@/assets/userBanner.jpg") no-repeat;
background-size: cover;
}
</style>

View File

@@ -0,0 +1,249 @@
<template>
<div class="ma-content-block lg:flex justify-between p-4">
<div class="lg:w-2/12 w-full h-full p-2 shadow">
<ma-tree-slider
v-model="depts"
searchPlaceholder="用户类型"
:field-names="{ title: 'label', value: 'value' }"
@click="switchDept"
></ma-tree-slider>
</div>
<div class="lg:w-10/12 w-full lg:ml-4 mt-5 lg:mt-0">
<!-- CRUD组件 -->
<ma-crud :options="crudOptions" :columns="crudColumns" ref="crudRef">
<template #status="{ record }">
<a-switch
:checked-value="1"
unchecked-value="2"
@change="changeStatus($event, record.id)"
:default-checked="record.status == 1"
></a-switch>
</template>
</ma-crud>
</div>
</div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue"
import MaTreeSlider from "@/components/ma-treeSlider/index.vue"
import userApi from "@/api/system/user"
import user from "@/api/system/user"
// 切换状态按钮
const changeStatus = (e, id) => {
console.log("当前值:", e)
console.log("当前ID", id)
}
// 树状组件-注意在onMounted中加载数据不然不显示
const depts = ref([])
onMounted(() => {
depts.value = [
{
id: 15,
parent_id: 0,
value: 15,
label: "成都分部",
children: [
{
id: 16,
parent_id: 15,
value: 16,
label: "FPGA组"
},
{
id: 17,
parent_id: 15,
value: 17,
label: "CPU组"
}
]
},
{
id: 1,
parent_id: 0,
value: 1,
label: "上海本部",
children: [
{
id: 3,
parent_id: 1,
value: 3,
label: "FPGA组",
children: [
{
id: 6,
parent_id: 3,
value: 6,
label: "研发部门"
},
{
id: 7,
parent_id: 3,
value: 7,
label: "市场部门"
},
{
id: 8,
parent_id: 3,
value: 8,
label: "测试部门"
},
{
id: 9,
parent_id: 3,
value: 9,
label: "财务部门"
},
{
id: 10,
parent_id: 3,
value: 10,
label: "运维部门"
}
]
},
{
id: 2,
parent_id: 1,
value: 2,
label: "CPU组",
children: [
{
id: 11,
parent_id: 2,
value: 11,
label: "市场部门",
children: [
{
id: 13,
parent_id: 11,
value: 13,
label: "外勤"
},
{
id: 14,
parent_id: 11,
value: 14,
label: "行政"
}
]
},
{
id: 12,
parent_id: 2,
value: 12,
label: "财务部门"
}
]
}
]
}
]
})
const switchDept = (key) => {
console.log("选择", key)
}
// crud组件
const crudRef = ref()
const crudOptions = reactive({
// 顶部每行显示列数
searchColNumber: 3,
// 开启分页
tablePagination: true,
// 是否显示索引列
showIndex: false,
// 行选择器
rowSelection: {
showCheckedAll: true
},
// 是否显示操作列
operationColumn: true,
operationWidth: 200,
// 设置列表数据API
api: userApi.getPageList,
// 设置新增接口-show为true则显示按钮、
add: {
show: true,
api: userApi.save
},
edit: {
show: true,
api: userApi.update
},
delete: {
show: true,
api: userApi.delete,
realApi: user.realDeletes
},
recovery: { show: true, api: user.recoverys },
// 是否开启双击编辑行
isDbClickEdit: true,
// 表单布局
formOption: {
viewType: "modal"
// isFull: true
},
})
const crudColumns = reactive([
{ title: "ID", dataIndex: "id", addDisplay: false, editDisplay: false, width: 50, hide: false, search: true },
{
title: "名称",
align: "center",
dataIndex: "name",
search: true,
width: 80,
commonRules: [{ required: true, message: "名称必填" }]
},
{ title: "用户名", dataIndex: "username", search: true },
{
title: "电话",
align: "center",
dataIndex: "phone",
search: true,
commonRules: [{ match: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码" }]
},
{
title: "邮箱",
align: "center",
dataIndex: "email",
search: true,
width: 100,
commonRules: [{ type: "email", message: "请输入正确的邮箱" }]
},
{
title: "密码",
dataIndex: "password",
hide: true,
autocomplete: "off",
addDisabled: false,
editDisabled: true,
type: "password",
addRules: [{ required: true, message: "密码必填" }],
addDefaultValue: "123456",
editDefaultValue: ""
},
{
title: "状态",
dataIndex: "status",
align: "center",
width: 100,
search: true,
formType: "radio",
dict: { name: "data_status", props: { label: "title", value: "key" } },
addDefaultValue: "1",
labelWidth: "86px"
},
{
title: "注册时间",
dataIndex: "created_at",
align: "center",
width: 180,
addDisplay: false,
editDisplay: false,
search: true,
formType: "range"
}
])
</script>
<style lang="less" scoped></style>

View File

@@ -0,0 +1,62 @@
<template>
<div class="w-full lg:w-9/12 ma-content-block rounded-sm p-3 mt-3 bg-color">
<div class="flex justify-between">
系统公告
<a-link>更多</a-link>
</div>
<a-table :data="data" :columns="columns" class="mt-2" :pagination="false">
<template #title="{ record }">
<a-link @click="viewDetail(record)">{{ record.title }}</a-link>
</template>
</a-table>
<a-modal v-model:visible="detailVisible" fullscreen :footer="false">
<template #title>公告详情</template>
<a-typography :style="{ marginTop: '-30px' }">
<a-typography-title class="text-center">
{{ row?.title }}
</a-typography-title>
<a-typography-paragraph class="text-right" style="font-size: 13px; color: var(--color-text-3)">
<a-space size="large">
<span>创建时间{{ row?.created_at }}</span>
</a-space>
</a-typography-paragraph>
<a-typography-paragraph>
<div v-html="row?.content"></div>
</a-typography-paragraph>
</a-typography>
</a-modal>
</div>
</template>
<script setup>
// 主要是首页-工作台-系统公告
import { ref, reactive } from "vue"
import commonApi from "@/api/common"
const data = ref([])
const columns = reactive([
{ title: "标题", dataIndex: "title", slotName: "title" },
{ title: "发布时间", dataIndex: "created_at", width: 180, align: "right" }
])
const row = ref({})
const detailVisible = ref(false)
const viewDetail = async (record) => {
row.value = record
detailVisible.value = true
}
const getNoticeList = async () => {
// 获取后台公告
const res = await commonApi.getNoticeList({ pageSize: 5, orderBy: "id", orderType: "desc" })
data.value = res.data
}
getNoticeList()
</script>
<style lang="less" scoped>
.bg-color{
background-color: var(--color-bg-1);
}
</style>

View File

@@ -0,0 +1,29 @@
<template>
<div class="w-full lg:w-3/12 ma-content-block rounded-sm ml-0 lg:ml-3 p-3 mt-3">
<div class="flex">成都测试管理平台相关</div>
<div class="block lg:grid lg:grid-cols-2 lg:gap-1 mt-3">
<a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
<a-button type="outline" class="w-full">仓库地址</a-button>
</a-card>
<a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
<a-button type="outline" class="w-full">Gitee地址</a-button>
</a-card>
<a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
<a-button type="outline" class="w-full">仓库地址</a-button>
</a-card>
<a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
<a-button type="outline" class="w-full">Gitee地址</a-button>
</a-card>
<a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
<a-button type="outline" class="w-full">仓库地址</a-button>
</a-card>
<a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
<a-button type="outline" class="w-full">Gitee地址</a-button>
</a-card>
</div>
</div>
</template>
<script setup></script>
<style lang="less" scoped></style>

View File

@@ -0,0 +1,115 @@
<template>
<div class="w-full mx-auto">
<div class="block lg:grid lg:grid-cols-4 lg:gap-1">
<a-card
style="height: 65px"
class="rounded-sm mt-3"
:body-style="{ padding: 0, height: '65px' }"
:bordered="false"
hoverable
>
<div class="flex justify-between h-full">
<div class="en-title bg-blue-600">NU</div>
<div class="w-full ml-3.5 flex justify-between items-center">
用户统计
<a-space size="large" class="mr-3">
<div class="text-right">
<div>总数</div>
<div>2</div>
</div>
<div class="text-right">
<div>新增</div>
<div><icon-caret-up class="text-green-600" /> 15</div>
</div>
</a-space>
</div>
</div>
</a-card>
<a-card
style="height: 65px"
class="rounded-sm mt-3 lg:ml-2"
:body-style="{ padding: 0, height: '65px' }"
:bordered="false"
hoverable
>
<div class="flex justify-between h-full">
<div class="en-title bg-red-600">NA</div>
<div class="w-full ml-3.5 flex justify-between items-center">
进行项目统计
<a-space size="large" class="mr-3">
<div class="text-right">
<div>总数</div>
<div>23</div>
</div>
<div class="text-right">
<div>减少</div>
<div><icon-caret-down class="text-red-600" /> 2</div>
</div>
</a-space>
</div>
</div>
</a-card>
<a-card
style="height: 65px"
class="rounded-sm mt-3 lg:ml-2"
:body-style="{ padding: 0, height: '65px' }"
:bordered="false"
hoverable
>
<div class="flex justify-between h-full">
<div class="en-title bg-pink-600">LC</div>
<div class="w-full ml-3.5 flex justify-between items-center">
项目总数
<a-space size="large" class="mr-3">
<div class="text-right">
<div>总数</div>
<div>234</div>
</div>
<div class="text-right">
<div>新增</div>
<div><icon-caret-down class="text-red-600" /> 3</div>
</div>
</a-space>
</div>
</div>
</a-card>
<a-card
style="height: 65px"
class="rounded-sm mt-3 lg:ml-2"
:body-style="{ padding: 0, height: '65px' }"
:bordered="false"
hoverable
>
<div class="flex justify-between h-full">
<div class="en-title bg-green-600">OC</div>
<div class="w-full ml-3.5 flex justify-between items-center">
提交项目总数
<a-space size="large" class="mr-3">
<div class="text-right">
<div>总数</div>
<div>45</div>
</div>
<div class="text-right">
<div>新增</div>
<div><icon-caret-up class="text-green-600" /> 2</div>
</div>
</a-space>
</div>
</div>
</a-card>
</div>
</div>
</template>
<style scoped>
.en-title {
width: 75px;
color: #fff;
text-align: center;
line-height: 65px;
font-weight: bold;
font-size: 1.3em;
border-radius: 2px 0 0 2px;
}
</style>

View File

@@ -0,0 +1,164 @@
<template>
<div class="ma-content-block p-3 mt-3 bg-white">
<ma-chart height="300px" :option="loginChartOptions" />
</div>
</template>
<script setup>
import { nextTick, onMounted, ref } from "vue"
import { graphic } from "echarts"
function graphicFactory(side) {
return {
type: "text",
bottom: "8",
...side,
style: {
text: "",
textAlign: "center",
fill: "#4E5969",
fontSize: 12
}
}
}
const xAxis = ref([
"2022-07-06",
"2022-07-07",
"2022-07-08",
"2022-07-09",
"2022-07-10",
"2022-07-11",
"2022-07-12",
"2022-07-13",
"2022-07-14",
"2022-07-15"
])
const chartsData = ref([32, 56, 61, 89, 12, 33, 56, 92, 180, 25])
const graphicElements = ref([graphicFactory({ left: "2.6%" }), graphicFactory({ right: 0 })])
const loginChartOptions = ref({
grid: {
left: "2.6%",
right: "0",
top: "10",
bottom: "30"
},
xAxis: {
type: "category",
offset: 2,
data: xAxis.value,
boundaryGap: false,
axisLabel: {
color: "#4E5969",
formatter(value, idx) {
if (idx === 0) return ""
if (idx === xAxis.value.length - 1) return ""
return `${value}`
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true,
interval: (idx) => {
if (idx === 0) return false
if (idx === xAxis.value.length - 1) return false
return true
},
lineStyle: {
color: "#E5E8EF"
}
},
axisPointer: {
show: true,
lineStyle: {
color: "#23ADFF",
width: 2
}
}
},
yAxis: {
type: "value",
axisLine: {
show: false
},
axisLabel: {
formatter(value, idx) {
if (idx === 0) return value
return `${value}`
}
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#E5E8EF"
}
}
},
tooltip: {
trigger: "axis",
formatter(params) {
return `<div class="login-chart">
<p class="tooltip-title">${params[0].axisValueLabel}</p>
<div class="content-panel"><span>项目新增</span><span class="tooltip-value">${Number(
params[0].value
).toLocaleString()}</span></div>
</div>`
}
},
graphic: {
elements: graphicElements.value
},
series: [
{
data: chartsData.value,
type: "line",
smooth: true,
symbolSize: 12,
emphasis: {
focus: "series",
itemStyle: {
borderWidth: 2
}
},
lineStyle: {
width: 3,
color: new graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgba(30, 231, 255, 1)"
},
{
offset: 0.5,
color: "rgba(36, 154, 255, 1)"
},
{
offset: 1,
color: "rgba(111, 66, 251, 1)"
}
])
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(17, 126, 255, 0.16)"
},
{
offset: 1,
color: "rgba(17, 128, 255, 0)"
}
])
}
}
]
})
</script>

View File

@@ -0,0 +1,53 @@
<template>
<div class="flex justify-between">
<div class="ma-content-block rounded-sm flex justify-between w-full p-3 bg-color">
<div class="pl-0 flex">
<a-avatar :size="75" class="hidden lg:inline-block">
<img src="@/assets/avatar/zhu.jpg" />
</a-avatar>
<div class="pl-3 mt-2">
<div class="content-block-title">{{ userStore.name }}今天天气很好欢迎回来</div>
<div class="leading-5 mt-2 flex items-center">
<a-tag color="red" bordered class="mr-2">好用的测试工具集</a-tag>
欢迎使用测试管理平台 长期更新
</div>
</div>
</div>
<div class="datetime ml-5 hidden md:block">
<h2 class="text-3xl text-center">{{ time }}</h2>
<p class="text-base">{{ day }}</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import { useUserStore } from "@/store"
import dayjs from "dayjs"
const userStore = useUserStore()
const time = ref(null)
const day = ref(null)
const showTime = () => {
time.value = dayjs().format("HH:mm:ss")
day.value = dayjs().format("YYYY年MM月DD日")
}
onMounted(() => {
showTime()
setInterval(() => showTime(), 1000)
})
</script>
<style lang="less" scoped>
.datetime {
background: rgb(var(--primary-6));
color: #fff;
width: 160px;
text-align: center;
border-radius: 3px;
padding: 5px 10px;
}
.bg-color {
background: var(--color-bg-2);
}
</style>

View File

@@ -0,0 +1,19 @@
<template>
<st-welcome></st-welcome>
<st-count />
<st-project-chart />
<div class="block lg:flex">
<st-announced />
<st-cdtestmanage-info />
</div>
</template>
<script setup>
import stWelcome from "./cpns/st-welcome.vue"
import stCount from "./cpns/st-count.vue"
import stProjectChart from "./cpns/st-project-chart.vue"
import stAnnounced from "./cpns/st-announced.vue"
import stCdtestmanageInfo from "./cpns/st-cdtestmanage-info.vue"
</script>
<style lang="less" scoped></style>

View File

@@ -1,7 +1,11 @@
<template>
<div><h2>我是workplace</h2></div>
<a-layout-content class="flex flex-col">
<statistics />
</a-layout-content>
</template>
<script setup></script>
<script setup>
import Statistics from "./components/statistics.vue"
</script>
<style lang="scss" scoped></style>
<style lang="less" scoped></style>

View File

@@ -0,0 +1,13 @@
<template>
<div></div>
</template>
<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router"
const router = useRouter()
const route = useRoute()
const gotoPath = route.params.path as string
router.replace({ path: gotoPath })
</script>
<style lang="less" scoped></style>

View File

@@ -0,0 +1,26 @@
<template>
<!-- 描述列表组件 -->
<a-modal width="1000px" v-model:visible="visible" :footer="false">
<template #title>{{ previewRecord.name }}</template>
<ma-info :columns="columns" :data="previewRecord"></ma-info>
</a-modal>
</template>
<script setup>
import { ref, reactive } from "vue"
import MaInfo from "@/components/ma-info/index.vue"
// 提供open方法给外界并获取整行数据
const visible = ref(false)
const previewRecord = ref({})
const columns = ref([])
const open = (record, outColumns) => {
visible.value = true
previewRecord.value = record
columns.value = outColumns
console.log(previewRecord.value);
}
defineExpose({ open })
// MA-INFO的columns
</script>
<style lang="less" scoped></style>

View File

@@ -0,0 +1,422 @@
<template>
<div class="ma-content-block p-3 lg:h-full block lg:border-0 lg:flex justify-between">
<ul class="w-full lg:w-2/12 msg-menu p-2 shadow" ref="msgMenuRef">
<li v-for="(item, index) in msgType" :key="item" @click="getProjectType(item.key, index)">
<Component :is="typeIcon[item.key] ? typeIcon[item.key] : 'icon-common'" />
<span class="pl-3">{{ item.title }}</span>
</li>
</ul>
<div class="h-full w-full lg:ml-3 lg:mr-2 pt-2">
<!-- ma-crud组件 -->
<ma-crud :options="crudOptions" :columns="crudColumns" ref="crudRef">
<template #operationBeforeExtend="{ record }">
<!-- <a-link @click="previewRef.open(record, crudColumns)"><icon-eye />预览</a-link> -->
<a-link @click="infoModalRef.open()"><icon-eye />预览</a-link>
</template>
</ma-crud>
</div>
<!-- <preview ref="previewRef"></preview> -->
<ma-info-modal ref="infoModalRef"></ma-info-modal>
</div>
</template>
<script lang="jsx" setup>
import { ref } from "vue"
import projectApi from "@/api/testmanage/project"
import preview from "./cpns/preview.vue"
import MaInfoModal from "@/components/ma-info-modal/index.vue"
// 定义预览组件的Ref
const infoModalRef = ref(null)
const previewRef = ref(null)
// 定义左侧标签切换-假数据
const typeIcon = ref({
er_fpga: "icon-send",
san_fpga: "icon-email",
er_cpu: "icon-copy",
san_cpu: "icon-calendar",
system_test: "icon-mobile",
examination_test: "icon-notification"
})
const msgMenuRef = ref()
const getProjectType = (key, index) => {
const children = msgMenuRef.value.children
// 如果有li元素的className找到active则清空再把点击的加上active样式
if (children && children[index].className.indexOf("active") === -1) {
for (let i = 0; i < children.length; i++) children[i].className = ""
children[index].className = "active"
}
}
const msgType = ref([
{ key: "er_fpga", title: "二方FPGA测试" },
{ key: "san_fpga", title: "三方FPGA测试" },
{ key: "examination_test", title: "考试项目测试" },
{ key: "er_cpu", title: "二方CPU测试" },
{ key: "san_cpu", title: "三方CPU测试" },
{ key: "system_test", title: "系统级测试" }
])
// CRUD-OPTIONS
const crudRef = ref()
const crudOptions = ref({
showIndex: false,
rowSelection: { showCheckedAll: true },
api: projectApi.getPageList,
add: { show: true },
edit: { show: true },
delete: { show: true },
searchColNumber: 3,
tablePagination: true,
operationColumn: true,
operationWidth: 200,
showIndex: false,
formOption: {
isFull: true,
layout: [
{
formType: "grid",
cols: [
{ span: 8, formList: [{ dataIndex: "ident" }] },
{ span: 8, formList: [{ dataIndex: "name" }] },
{ span: 8, formList: [{ dataIndex: "engin_model" }] }
]
},
{
formType: "grid",
cols: [
{ span: 8, formList: [{ dataIndex: "section_system" }] },
{ span: 8, formList: [{ dataIndex: "sub_system" }] },
{ span: 8, formList: [{ dataIndex: "device" }] }
]
},
{
formType: "grid",
cols: [
{ span: 12, formList: [{ dataIndex: "beginTime" }] },
{ span: 12, formList: [{ dataIndex: "endTime" }] }
]
},
{
formType: "grid",
cols: [
{ span: 12, formList: [{ dataIndex: "duty_person" }] },
{ span: 12, formList: [{ dataIndex: "member" }] }
]
},
{
formType: "grid",
cols: [{ span: 24, formList: [{ dataIndex: "security_level" }] }]
},
{
formType: "grid",
cols: [
{ span: 12, formList: [{ dataIndex: "test_level" }] },
{ span: 12, formList: [{ dataIndex: "plant_type" }] }
]
}
]
}
})
// CRUD-CLOMNS
const crudColumns = ref([
{
title: "标识",
width: 70,
dataIndex: "ident",
search: true,
commonRules: [{ required: true, message: "标识是必填" }],
validateTrigger: "blur"
},
{
title: "项目名称",
dataIndex: "name",
search: true,
commonRules: [{ required: true, message: "名称是必填" }]
},
{ title: "工程型号", dataIndex: "engin_model", hide: true },
{ title: "分系统", dataIndex: "section_system", hide: true },
{ title: "子系统", dataIndex: "sub_system", hide: true },
{ title: "设备", dataIndex: "device", hide: true },
{
title: "开始日期",
dataIndex: "beginTime",
commonRules: [{ required: true, message: "开始时间必填" }],
formType: "date"
},
{
title: "结束时间",
dataIndex: "endTime",
formType: "date"
},
// 这是只为了搜索的字段
{
title: "时间范围",
hide: true,
dataIndex: "searchOnlyTimeRange",
search: true,
addDisplay: false,
editDisplay: false,
formType: "range"
},
{
title: "责任人",
width: 70,
dataIndex: "duty_person",
search: true,
commonRules: [{ required: true, message: "责任人必选" }],
formType: "select",
dict: { url: "system/user/index", props: { label: "name", value: "name" }, translation: true }
},
{
title: "成员",
dataIndex: "member",
hide: true,
search: true,
formType: "select",
multiple: true,
dict: { url: "system/user/index", props: { label: "name", value: "name" }, translation: true },
commonRules: [{ required: true, message: "成员至少选择一个" }]
},
{
title: "关键等级",
dataIndex: "security_level",
addDefaultValue: "3",
hide: true,
commonRules: [{ required: true, message: "关键等级必填" }],
search: true,
formType: "radio",
dict: { name: "security_level", props: { label: "value", value: "key" } }
},
{
title: "测试级别",
dataIndex: "test_level",
commonRules: [{ required: true, message: "请至少选择一个" }],
addDefaultValue: ["6"],
hide: true,
formType: "checkbox",
dict: { name: "test_level", props: { label: "title", value: "key" } }
},
{
title: "平台类型",
dataIndex: "plant_type",
addDefaultValue: "4",
hide: true,
formType: "radio",
dict: { name: "plant_type", props: { label: "title", value: "key" } }
},
{
title: "报告类型",
dataIndex: "report_type",
addDefaultValue: "1",
search: true,
commonRules: [{ required: true, message: "报告类型必填" }],
// 字典-report_type
formType: "radio",
dict: { name: "report_type", translation: true, props: { label: "title", value: "key" } }
},
{
title: "编程语言",
dataIndex: "language",
addDefaultValue: ["1"],
commonRules: [{ required: true, message: "请至少选择一个" }],
hide: true,
formType: "checkbox",
dict: { name: "language", props: { label: "title", value: "key" } }
},
{
title: "依据标准",
dataIndex: "standard",
addDefaultValue: ["1"],
commonRules: [{ required: true, message: "请至少选择一个" }],
hide: true,
formType: "checkbox",
dict: { name: "standard", props: { label: "title", value: "key" } }
},
{
hide: true,
formType: "grid-tailwind",
customClass: ["mt-0 mb-3"],
colNumber: 3,
cols: [
{
formList: [
{
title: "委托方信息",
customClass: ["mt-0"],
formType: "card",
formList: [
{
formType: "grid-tailwind",
colNumber: 1,
cols: [
{
formList: [
{
title: "标识",
dataIndex: "entrust_ident",
rules: [{ required: true, message: "标识必填" }]
},
{
title: "法人",
dataIndex: "entrust_legal",
rules: [{ required: true, message: "法人必填" }]
},
{
formType: "input",
title: "联系人",
dataIndex: "entrust_contact",
rules: [{ required: true, message: "联系人必填" }]
},
{
formType: "input",
title: "联系电话",
dataIndex: "entrust_contact_phone",
rules: [{ required: true, message: "联系电话必填" }]
},
{
formType: "input",
title: "电子邮箱",
dataIndex: "entrust_email",
rules: [{ required: true, message: "电子邮箱必填" }]
}
]
}
]
}
]
}
]
},
{
formList: [
{
title: "研制单位信息",
customClass: ["mt-0"],
formType: "card",
formList: [
{
formType: "grid-tailwind",
colNumber: 1,
cols: [
{
formList: [
{
title: "标识",
dataIndex: "dev_ident",
rules: [{ required: true, message: "标识必填" }]
},
{
title: "法人",
dataIndex: "dev_legal",
rules: [{ required: true, message: "法人必填" }]
},
{
formType: "input",
title: "联系人",
dataIndex: "dev_contact",
rules: [{ required: true, message: "联系人必填" }]
},
{
formType: "input",
title: "联系电话",
dataIndex: "dev_contact_phone",
rules: [{ required: true, message: "联系电话必填" }]
},
{
formType: "input",
title: "电子邮箱",
dataIndex: "dev_email",
rules: [{ required: true, message: "电子邮箱必填" }]
}
]
}
]
}
]
}
]
},
{
formList: [
{
title: "测评单位信息",
customClass: ["mt-0"],
formType: "card",
formList: [
{
formType: "grid-tailwind",
colNumber: 1,
cols: [
{
formList: [
{
title: "标识",
dataIndex: "test_ident",
rules: [{ required: true, message: "标识必填" }]
},
{
title: "法人",
dataIndex: "test_legal",
rules: [{ required: true, message: "法人必填" }]
},
{
formType: "input",
title: "联系人",
dataIndex: "test_contact",
rules: [{ required: true, message: "联系人必填" }]
},
{
formType: "input",
title: "联系电话",
dataIndex: "test_contact_phone",
rules: [{ required: true, message: "联系电话必填" }]
},
{
formType: "input",
title: "电子邮箱",
dataIndex: "test_email",
rules: [{ required: true, message: "电子邮箱必填" }]
}
]
}
]
}
]
}
]
}
]
},
{
title: "状态",
dataIndex: "step",
search: true,
formType: "radio",
addDefaultValue: "1",
addDisabled: true,
dict: {
name: "step",
translation: true,
props: { label: "title", value: "key" },
tagColors: { 1: "green", 2: "blue", 3: "red", 4: "yellow" }
}
}
])
</script>
<style lang="less" scoped>
.msg-menu {
// border-right: 1px solid var(--color-border-2);
& li {
border-radius: 1px;
cursor: pointer;
margin-bottom: 5px;
padding: 10px;
padding-left: 20px;
}
& li:hover,
& li.active {
background: var(--color-fill-2);
color: rgb(var(--primary-5));
}
}
</style>