Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
E
EMS
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
hejie
EMS
Commits
f99a1479
提交
f99a1479
authored
5月 13, 2025
作者:
詹银鑫
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'zyxdev' of
https://t.clxkj.cn/hejie/EMS
into feature-20250411
上级
85664d58
fc8bb604
隐藏空白字符变更
内嵌
并排
正在显示
6 个修改的文件
包含
896 行增加
和
26 行删除
+896
-26
index.vue
src/views/fac-manage/fac-edit/index.vue
+255
-0
hook.tsx
src/views/fac-manage/fac-edit/utils/hook.tsx
+108
-0
index.vue
src/views/fac-manage/fac-list/index.vue
+6
-4
hook.tsx
src/views/fac-manage/fac-list/utils/hook.tsx
+64
-13
index.vue
src/views/fac-manage/fac-select/index.vue
+171
-9
hook.tsx
src/views/fac-manage/fac-select/utils/hook.tsx
+292
-0
没有找到文件。
src/views/fac-manage/fac-edit/index.vue
0 → 100644
浏览文件 @
f99a1479
<
template
>
<div
class=
"main"
>
<!-- 搜索表单 -->
<el-form
ref=
"formRef"
:inline=
"true"
:model=
"form"
class=
"search-form bg-bg_color w-full h-full pl-8 pt-[12px] overflow-auto"
>
<el-row>
<el-col
:span=
"6"
>
<!-- 角色名称输入项 -->
<el-form-item
label=
"厂商名称:"
prop=
"name"
>
<el-input
v-model=
"form.name"
placeholder=
"请输入厂商名称"
clearable
class=
"w-[180px]!"
/>
</el-form-item>
</el-col>
<el-col
:span=
"6"
>
<!-- 角色名称输入项 -->
<el-form-item
label=
"厂商简称:"
prop=
"abbreviation"
>
<el-input
v-model=
"form.abbreviation"
placeholder=
"请输入厂商简称"
clearable
class=
"w-[180px]!"
/>
</el-form-item>
</el-col>
<el-col
:span=
"6"
>
<!-- 角色名称输入项 -->
<el-form-item
label=
"设备联系人:"
prop=
"contactPerson"
>
<el-input
v-model=
"form.name"
placeholder=
"请输入设备联系人"
clearable
class=
"w-[180px]!"
/>
</el-form-item>
</el-col>
<el-col
:span=
"6"
>
<!-- 角色名称输入项 -->
<el-form-item
label=
"厂商类型:"
prop=
"facType"
>
<el-select
v-model=
"form.facType"
clearable
class=
"w-[180px]!"
placeholder=
"请选择厂商类型"
>
<el-option
v-for=
"item in form.facTypeList"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"12"
>
<!-- 角色名称输入项 -->
<el-form-item
label=
"统一社会信用代号/税号:"
prop=
"creditCode"
>
<el-input
v-model=
"form.creditCode"
placeholder=
"请输入统一社会信用代号/税号"
clearable
class=
"w-[500px]!"
/>
</el-form-item>
</el-col>
<el-col
:span=
"12"
>
<!-- 角色名称输入项 -->
<el-form-item
label=
"总部地址:"
prop=
"address"
>
<el-input
v-model=
"form.hqAddress"
placeholder=
"请输入地址"
clearable
class=
"w-[500px]!"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"12"
>
<!-- 角色名称输入项 -->
<el-form-item
label=
"官网地址:"
prop=
"officalAddress"
>
<el-input
v-model=
"form.officalAddress"
placeholder=
"请输入官网地址"
clearable
style=
"width: 500px"
/>
</el-form-item>
</el-col>
<el-col
:span=
"12"
>
<!-- 角色名称输入项 -->
<el-form-item
label=
"关联设备:"
prop=
"assDevice"
>
<el-select
v-model=
"form.assDevice"
clearable
class=
"w-[180px]!"
placeholder=
"请选择关联设备"
>
<el-option
v-for=
"item in form.assDeviceList"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"12"
>
<!-- 角色名称输入项 -->
<el-form-item
label=
"备注:"
prop=
"remark"
label-width=
"80px"
>
<el-input
v-model=
"form.notes"
:autosize=
"
{ minRows: 4, maxRows: 6 }"
type="textarea"
placeholder="请输入备注"
clearable
class="w-[500px]!"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"12"
>
<el-form-item
label=
"合同文件:"
prop=
"remark"
>
<el-upload
class=
"upload-demo"
drag
action=
"https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
multiple
:on-success=
"handleAvatarSuccess"
:before-upload=
"beforeAvatarUpload"
>
<el-icon
class=
"el-icon--upload"
><upload-filled
/></el-icon>
<div
class=
"el-upload__text"
>
将您的文件拖放到此处,或者
<em>
点击上传
</em>
</div>
<template
#
tip
>
<div
class=
"el-upload__tip"
>
2M以内,支持xlsx、xls格式
</div>
</
template
>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row
class=
"fixed-bottom"
>
<div
class=
"flex flex-row-reverse w-full"
>
<el-form-item>
<!-- 搜索按钮,点击触发搜索操作 -->
<el-button
type=
"primary"
:icon=
"useRenderIcon(Check)"
:loading=
"loading"
@
click=
"onSearch"
>
确定
</el-button>
<!-- 重置按钮,点击触发重置表单并重新搜索 -->
<el-button
:icon=
"useRenderIcon(Close)"
@
click=
"resetForm(formRef)"
>
取消
</el-button>
</el-form-item>
</div>
</el-row>
</el-form>
</div>
</template>
<
script
setup
lang=
"ts"
>
// 组件逻辑部分
import
{
ref
}
from
"vue"
;
// 引入图标渲染 hook
import
{
useRenderIcon
}
from
"@/components/ReIcon/src/hooks"
;
import
{
useFacForm
}
from
"./utils/hook"
;
import
{
UploadFilled
}
from
"@element-plus/icons-vue"
;
// 引入工具函数
import
{
delay
,
subBefore
,
deviceDetection
,
useResizeObserver
}
from
"@pureadmin/utils"
;
// 引入图标
// import Database from "~icons/ri/database-2-line";
// import More from "~icons/ep/more-filled";
import
Delete
from
"~icons/ep/delete"
;
import
EditPen
from
"~icons/ep/edit-pen"
;
import
Refresh
from
"~icons/ep/refresh"
;
import
Menu
from
"~icons/ep/menu"
;
import
AddFill
from
"~icons/ri/add-circle-line"
;
import
Close
from
"~icons/ep/close"
;
import
Check
from
"~icons/ep/check"
;
import
Back
from
"~icons/ep/back"
;
/**
* 定义组件选项
* 设置组件名称为 SystemRole,方便调试和组件识别
*/
defineOptions
({
name
:
"Fac-Create"
});
// 创建表单引用
const
formRef
=
ref
();
const
count
=
ref
(
0
);
const
{
form
,
loading
,
onSearch
,
resetForm
,
tagName
,
handleAvatarSuccess
,
beforeAvatarUpload
,
goBack
}
=
useFacForm
();
</
script
>
<
style
scoped
lang=
"scss"
>
/* 定义主容器样式 */
.main
{
position
:
relative
;
height
:
95%
;
overflow
:
auto
;
}
/* 设置搜索表单内表单项的底部外边距 */
.search-form
{
:deep
(
.el-form-item
)
{
margin-bottom
:
12px
;
}
}
/* 设置搜索表单内表单项的底部外边距 */
.fixed-bottom
{
position
:
absolute
;
bottom
:
0
;
left
:
0
;
z-index
:
10
;
/* 确保在其他内容之上 */
width
:
100%
;
padding
:
10px
;
/* 可选,增加内边距 */
background-color
:
#fff
;
/* 可选,设置背景色 */
}
</
style
>
src/views/fac-manage/fac-edit/utils/hook.tsx
0 → 100644
浏览文件 @
f99a1479
import
{
reactive
,
ref
,
onMounted
}
from
"vue"
;
import
{
ElMessage
}
from
"element-plus"
;
import
type
{
UploadProps
}
from
"element-plus"
;
import
{
useRouter
}
from
"vue-router"
;
export
function
useFacForm
()
{
const
form
=
reactive
({
name
:
""
,
abbreviation
:
""
,
creditCode
:
""
,
contactPerson
:
""
,
facType
:
"hardware"
,
facTypeList
:
[
{
label
:
"硬件"
,
value
:
"hardware"
},
{
label
:
"软件"
,
value
:
"software"
},
{
label
:
"云服务"
,
value
:
"cloud"
},
{
label
:
"解决方案"
,
value
:
"solution"
}
],
hqAddress
:
""
,
officalAddress
:
""
,
notes
:
""
,
assDevice
:
"device1"
,
assDeviceList
:
[
{
label
:
"设备1"
,
value
:
"device1"
},
{
label
:
"设备2"
,
value
:
"device2"
},
{
label
:
"设备3"
,
value
:
"device3"
}
]
});
const
tagName
=
ref
(
"厂商信息"
);
const
loading
=
ref
(
false
);
const
imageUrl
=
ref
(
""
);
const
router
=
useRouter
();
async
function
onSearch
()
{
loading
.
value
=
true
;
// const { data } = await getRoleList(toRaw(form));
setTimeout
(()
=>
{
loading
.
value
=
false
;
},
500
);
}
const
resetForm
=
formEl
=>
{
if
(
!
formEl
)
return
;
formEl
.
resetFields
();
onSearch
();
};
const
handleAvatarSuccess
:
UploadProps
[
"onSuccess"
]
=
(
response
,
uploadFile
)
=>
{
console
.
log
(
"uploadFile"
,
uploadFile
);
imageUrl
.
value
=
URL
.
createObjectURL
(
uploadFile
.
raw
!
);
console
.
log
(
"imageUrl.value"
,
imageUrl
.
value
);
};
const
beforeAvatarUpload
:
UploadProps
[
"beforeUpload"
]
=
rawFile
=>
{
console
.
log
(
"rawFile"
,
rawFile
);
if
(
rawFile
.
type
!==
"xlsx/xls"
)
{
ElMessage
.
error
(
"文件上传类型只支持xlsx/xls!"
);
return
false
;
}
else
if
(
rawFile
.
size
/
1024
/
1024
>
2
)
{
ElMessage
.
error
(
"文件不能超过2MB!"
);
return
false
;
}
return
true
;
};
const
goBack
=
()
=>
{
router
.
push
(
"/welcome"
);
};
const
fetchFacDetails
=
editItem
=>
{
console
.
log
(
"editItem"
,
editItem
);
if
(
editItem
)
{
form
.
name
=
editItem
.
name
;
form
.
abbreviation
=
editItem
.
abbreviation
;
form
.
creditCode
=
editItem
.
creditCode
;
form
.
contactPerson
=
editItem
.
contactPerson
;
form
.
facType
=
editItem
.
facType
;
form
.
hqAddress
=
editItem
.
address
;
form
.
officalAddress
=
editItem
.
officalAddress
;
}
};
const
route
=
useRoute
();
const
editItem
=
JSON
.
parse
(
Array
.
isArray
(
route
.
query
.
editItem
)
?
route
.
query
.
editItem
[
0
]
:
route
.
query
.
editItem
||
"{}"
);
onMounted
(()
=>
{
fetchFacDetails
(
editItem
);
});
return
{
tagName
,
form
,
loading
,
onSearch
,
resetForm
,
imageUrl
,
handleAvatarSuccess
,
beforeAvatarUpload
,
goBack
};
}
src/views/fac-manage/fac-list/index.vue
浏览文件 @
f99a1479
...
...
@@ -8,8 +8,8 @@
class=
"search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto relative"
>
<el-form-item>
<el-button
type=
"success"
>
新建
</el-button>
<el-button>
编辑
</el-button>
<el-button
type=
"success"
@
click=
"goFacCreate"
>
新建
</el-button>
<el-button
@
click=
"handleEdit"
>
编辑
</el-button>
<el-button>
删除
</el-button>
<el-button>
导入
</el-button>
<el-button>
导出
</el-button>
...
...
@@ -88,7 +88,7 @@ import Search from "~icons/ep/search";
* 设置组件名称为 SystemRole,方便调试和组件识别
*/
defineOptions
({
name
:
"Fac-
Create
"
name
:
"Fac-
List
"
});
// 创建表单引用
...
...
@@ -101,9 +101,11 @@ const {
pagination
,
rowStyle
,
onSearch
,
goFacCreate
,
handleSizeChange
,
handleCurrentChange
,
handleSelectionChange
handleSelectionChange
,
handleEdit
}
=
useFacList
();
const
tableRef
=
ref
();
...
...
src/views/fac-manage/fac-list/utils/hook.tsx
浏览文件 @
f99a1479
...
...
@@ -14,6 +14,15 @@ export function useFacList() {
const
curRow
=
ref
();
const
searchName
=
ref
(
""
);
const
dataList
=
ref
([]);
const
multipleSelection
=
ref
([]);
const
filterFacType
=
(
value
,
row
)
=>
{
return
row
.
facType
===
value
;
};
const
filterassDevice
=
(
value
,
row
)
=>
{
return
row
.
assDevice
===
value
;
};
const
columns
:
TableColumnList
=
[
{
...
...
@@ -24,10 +33,31 @@ export function useFacList() {
{
prop
:
"name"
,
label
:
"厂商名称"
,
width
:
80
},
{
prop
:
"abbreviation"
,
label
:
"厂商简称"
},
{
prop
:
"creditCode"
,
label
:
"统一社会信用代号/税号"
},
{
prop
:
"facType"
,
label
:
"厂商类型"
},
{
prop
:
"facType"
,
label
:
"厂商类型"
,
filters
:
[
{
text
:
"类型1"
,
value
:
"类型1"
},
{
text
:
"类型2"
,
value
:
"类型2"
},
{
text
:
"类型3"
,
value
:
"类型3"
}
],
filterMethod
:
filterFacType
,
filterPlacement
:
"bottom-end"
,
slot
:
"tag"
},
{
prop
:
"address"
,
label
:
"总部地址"
},
{
prop
:
"officalAddress"
,
label
:
"官网地址"
},
{
prop
:
"assDevice"
,
label
:
"关联设备"
}
{
prop
:
"assDevice"
,
label
:
"关联设备"
,
filters
:
[
{
text
:
"水质检测"
,
value
:
"水质检测"
},
{
text
:
"噪声检测"
,
value
:
"噪声检测"
}
],
filterMethod
:
filterassDevice
,
filterPlacement
:
"bottom-end"
,
slot
:
"tag"
}
];
const
pagination
=
reactive
<
PaginationProps
>
({
...
...
@@ -77,7 +107,7 @@ export function useFacList() {
facType
:
"类型1"
,
address
:
"北京市朝阳区"
,
officalAddress
:
"https://www.changshangA.com"
,
assDevice
:
"
设备A1, 设备A2
"
assDevice
:
"
水质检测
"
},
{
orderNumber
:
2
,
...
...
@@ -87,7 +117,7 @@ export function useFacList() {
facType
:
"类型2"
,
address
:
"上海市浦东新区"
,
officalAddress
:
"https://www.changshangB.com"
,
assDevice
:
"
设备B1, 设备B2
"
assDevice
:
"
噪声检测
"
},
{
orderNumber
:
3
,
...
...
@@ -97,7 +127,7 @@ export function useFacList() {
facType
:
"类型1"
,
address
:
"广州市天河区"
,
officalAddress
:
"https://www.changshangC.com"
,
assDevice
:
"
设备C1, 设备C2
"
assDevice
:
"
水质检测
"
},
{
orderNumber
:
4
,
...
...
@@ -107,7 +137,7 @@ export function useFacList() {
facType
:
"类型3"
,
address
:
"深圳市南山区"
,
officalAddress
:
"https://www.changshangD.com"
,
assDevice
:
"
设备D1, 设备D2
"
assDevice
:
"
水质检测
"
},
{
orderNumber
:
5
,
...
...
@@ -117,7 +147,7 @@ export function useFacList() {
facType
:
"类型2"
,
address
:
"杭州市西湖区"
,
officalAddress
:
"https://www.changshangE.com"
,
assDevice
:
"
设备E1, 设备E2
"
assDevice
:
"
噪声检测
"
},
{
orderNumber
:
6
,
...
...
@@ -127,7 +157,7 @@ export function useFacList() {
facType
:
"类型1"
,
address
:
"成都市武侯区"
,
officalAddress
:
"https://www.changshangF.com"
,
assDevice
:
"
设备F1, 设备F2
"
assDevice
:
"
噪声检测
"
},
{
orderNumber
:
7
,
...
...
@@ -137,7 +167,7 @@ export function useFacList() {
facType
:
"类型3"
,
address
:
"南京市鼓楼区"
,
officalAddress
:
"https://www.changshangG.com"
,
assDevice
:
"
设备G1, 设备G2
"
assDevice
:
"
噪声检测
"
},
{
orderNumber
:
8
,
...
...
@@ -147,7 +177,7 @@ export function useFacList() {
facType
:
"类型2"
,
address
:
"武汉市洪山区"
,
officalAddress
:
"https://www.changshangH.com"
,
assDevice
:
"
设备H1, 设备H2
"
assDevice
:
"
水质检测
"
}
];
dataList
.
value
=
testData
;
...
...
@@ -177,10 +207,25 @@ export function useFacList() {
function
handleSelectionChange
(
val
)
{
multipleSelection
.
value
=
val
;
console
.
log
(
"handleSelectionChange"
,
val
);
// console.log("handleSelectionChange", val);
}
/** 编辑按钮事件 */
function
handleEdit
()
{
if
(
multipleSelection
.
value
.
length
===
0
)
{
ElMessage
.
warning
(
"请选择一条数据进行编辑"
);
return
;
}
else
if
(
multipleSelection
.
value
.
length
>
1
)
{
ElMessage
.
warning
(
"只能选择一条数据进行编辑"
);
return
;
}
router
.
push
({
path
:
"/fac-manage/fac-edit"
,
query
:
{
editItem
:
JSON
.
stringify
(
multipleSelection
.
value
[
0
])
}
});
console
.
log
(
"multipleSelection"
,
multipleSelection
.
value
);
}
const
multipleSelection
=
ref
([]);
// const toggleSelection = (rows?: any) => {
// const { toggleRowSelection, clearSelection } = tableRef.value.getTableRef();
// if (rows) {
...
...
@@ -196,6 +241,10 @@ export function useFacList() {
router
.
push
(
"/welcome"
);
};
const
goFacCreate
=
()
=>
{
router
.
push
(
"/fac-manage/fac-create"
);
};
onMounted
(
async
()
=>
{
onSearch
();
// const { data } = await getMenuList({ pageNum: 1, pageSize: 1000 });
...
...
@@ -214,9 +263,11 @@ export function useFacList() {
handleAvatarSuccess
,
beforeAvatarUpload
,
goBack
,
goFacCreate
,
rowStyle
,
handleSizeChange
,
handleCurrentChange
,
handleSelectionChange
handleSelectionChange
,
handleEdit
};
}
src/views/fac-manage/fac-select/index.vue
浏览文件 @
f99a1479
<
template
>
<div
class=
"systems"
>
<h2>
fac-select
</h2>
<slot
/>
<div
class=
"main"
>
<!-- 搜索表单 -->
<el-form
ref=
"formRef"
:inline=
"true"
:model=
"form"
class=
"search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto relative"
>
<el-row>
<el-col
:span=
"6"
>
<el-form-item
label=
"厂商名称"
prop=
"name"
>
<el-input
v-model=
"form.name"
placeholder=
"请输入厂商名称"
clearable
class=
"w-[180px]!"
/>
</el-form-item>
</el-col>
<el-col
:span=
"6"
>
<el-form-item
label=
"厂商简称"
prop=
"abbreviation"
>
<el-input
v-model=
"form.abbreviation"
placeholder=
"请输入厂商简称"
clearable
class=
"w-[180px]!"
/>
</el-form-item>
</el-col>
<el-col
:span=
"12"
>
<el-form-item
label=
"统一社会名称代号/税号"
prop=
"creditCode"
>
<el-input
v-model=
"form.creditCode"
placeholder=
"请输入统一社会名称代号/税号"
class=
"w-[280px]!"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col
:span=
"6"
>
<el-form-item
label=
"厂商类型"
prop=
"facType"
>
<el-select
v-model=
"form.facType"
clearable
class=
"w-[180px]!"
placeholder=
"请选择厂商类型"
>
<el-option
v-for=
"item in form.facTypeList"
:key=
"item.value"
:label=
"item.label"
:value=
"item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col
:span=
"6"
>
<el-form-item
label=
"关联设备"
prop=
"assDevice"
>
<el-input
v-model=
"form.assDevice"
placeholder=
"请输入关联设备"
class=
"w-[180px]!"
/>
</el-form-item>
</el-col>
<el-col
:span=
"6"
>
<el-form-item
label=
"总部地址:"
prop=
"hqAddress"
>
<el-input
v-model=
"form.hqAddress"
placeholder=
"请输入总部地址"
class=
"w-[180px]!"
/>
</el-form-item>
</el-col>
</el-row>
<el-row
class=
"mb-2"
>
<el-col
:span=
"12"
:offset=
"8"
>
<el-button
type=
"success"
>
查询
</el-button>
<el-button>
取消
</el-button>
<el-button>
重置
</el-button>
</el-col>
</el-row>
</el-form>
<!-- 内容区域 -->
<div
ref=
"contentRef"
:class=
"['flex', deviceDetection() ? 'flex-wrap' : '']"
>
<!-- 自定义表格栏组件 -->
<PureTableBar
:class=
"'w-full'"
style=
"transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
title=
"厂商列表"
:columns=
"columns"
@
refresh=
"onSearch"
>
<!-- 表格插槽 -->
<template
v-slot=
"
{ size, dynamicColumns }">
<!-- 自定义表格组件 -->
<pure-table
ref=
"tableRef"
align-whole=
"center"
showOverflowTooltip
table-layout=
"auto"
:loading=
"loading"
:size=
"size"
adaptive
:row-style=
"rowStyle"
:adaptiveConfig=
"
{ offsetBottom: 108 }"
:data="dataList"
:columns="dynamicColumns"
:pagination="{ ...pagination, size }"
:header-cell-style="{
background: 'var(--el-fill-color-light)',
color: 'var(--el-text-color-primary)'
}"
@selection-change="handleSelectionChange"
@page-size-change="handleSizeChange"
@page-current-change="handleCurrentChange"
/>
</
template
>
</PureTableBar>
</div>
</div>
</template>
<
script
setup
lang=
"ts"
>
// 组件逻辑部分
import
{
ref
}
from
"vue"
;
import
{
useFacList
}
from
"./utils/hook"
;
import
{
UploadFilled
}
from
"@element-plus/icons-vue"
;
import
{
delay
,
subBefore
,
deviceDetection
,
useResizeObserver
}
from
"@pureadmin/utils"
;
// 引入自定义表格栏组件
import
{
PureTableBar
}
from
"@/components/RePureTableBar"
;
const
count
=
ref
(
0
);
/**
* 定义组件选项
* 设置组件名称为 SystemRole,方便调试和组件识别
*/
defineOptions
({
name
:
"Fac-List"
});
const
increment
=
()
=>
{
count
.
value
++
;
// 创建表单引用
const
formRef
=
ref
();
const
{
form
,
columns
,
loading
,
dataList
,
pagination
,
rowStyle
,
onSearch
,
handleSizeChange
,
handleCurrentChange
,
handleSelectionChange
}
=
useFacList
();
const
tableRef
=
ref
();
const
toggleSelection
=
(
rows
?:
any
)
=>
{
const
{
toggleRowSelection
,
clearSelection
}
=
tableRef
.
value
.
getTableRef
();
if
(
rows
)
{
rows
.
forEach
(
row
=>
{
toggleRowSelection
(
row
,
undefined
);
});
}
else
{
clearSelection
();
}
};
</
script
>
<
style
scoped
lang=
"scss"
>
.systems
{
padding
:
20px
;
border
:
1px
solid
#ccc
;
/* 设置搜索表单内表单项的底部外边距 */
.search-form
{
:deep
(
.el-form-item
)
{
margin-bottom
:
12px
;
}
}
</
style
>
src/views/fac-manage/fac-select/utils/hook.tsx
0 → 100644
浏览文件 @
f99a1479
import
{
reactive
,
ref
}
from
"vue"
;
import
{
ElMessage
}
from
"element-plus"
;
import
type
{
UploadProps
}
from
"element-plus"
;
import
{
useRouter
}
from
"vue-router"
;
import
type
{
PaginationProps
}
from
"@pureadmin/table"
;
export
function
useFacList
()
{
const
form
=
reactive
({
name
:
""
,
abbreviation
:
""
,
creditCode
:
""
,
contactPerson
:
""
,
facType
:
"hardware"
,
facTypeList
:
[
{
label
:
"硬件"
,
value
:
"hardware"
},
{
label
:
"软件"
,
value
:
"software"
},
{
label
:
"云服务"
,
value
:
"cloud"
},
{
label
:
"解决方案"
,
value
:
"solution"
}
],
hqAddress
:
""
,
officalAddress
:
""
,
notes
:
""
,
assDevice
:
"device1"
,
assDeviceList
:
[
{
label
:
"设备1"
,
value
:
"device1"
},
{
label
:
"设备2"
,
value
:
"device2"
},
{
label
:
"设备3"
,
value
:
"device3"
}
]
});
const
loading
=
ref
(
false
);
const
imageUrl
=
ref
(
""
);
const
router
=
useRouter
();
const
curRow
=
ref
();
const
searchName
=
ref
(
""
);
const
dataList
=
ref
([]);
const
multipleSelection
=
ref
([]);
const
filterFacType
=
(
value
,
row
)
=>
{
return
row
.
facType
===
value
;
};
const
filterassDevice
=
(
value
,
row
)
=>
{
return
row
.
assDevice
===
value
;
};
const
columns
:
TableColumnList
=
[
{
type
:
"selection"
,
align
:
"left"
},
{
prop
:
"orderNumber"
,
label
:
"序号"
,
width
:
70
},
{
prop
:
"name"
,
label
:
"厂商名称"
,
width
:
80
},
{
prop
:
"abbreviation"
,
label
:
"厂商简称"
},
{
prop
:
"creditCode"
,
label
:
"统一社会信用代号/税号"
},
{
prop
:
"facType"
,
label
:
"厂商类型"
,
filters
:
[
{
text
:
"类型1"
,
value
:
"类型1"
},
{
text
:
"类型2"
,
value
:
"类型2"
},
{
text
:
"类型3"
,
value
:
"类型3"
}
],
filterMethod
:
filterFacType
,
filterPlacement
:
"bottom-end"
,
slot
:
"tag"
},
{
prop
:
"address"
,
label
:
"总部地址"
},
{
prop
:
"officalAddress"
,
label
:
"官网地址"
},
{
prop
:
"assDevice"
,
label
:
"关联设备"
,
filters
:
[
{
text
:
"水质检测"
,
value
:
"水质检测"
},
{
text
:
"噪声检测"
,
value
:
"噪声检测"
}
],
filterMethod
:
filterassDevice
,
filterPlacement
:
"bottom-end"
,
slot
:
"tag"
}
];
const
pagination
=
reactive
<
PaginationProps
>
({
total
:
0
,
pageSize
:
10
,
currentPage
:
1
,
background
:
true
});
const
resetForm
=
formEl
=>
{
if
(
!
formEl
)
return
;
formEl
.
resetFields
();
onSearch
();
};
const
handleAvatarSuccess
:
UploadProps
[
"onSuccess"
]
=
(
response
,
uploadFile
)
=>
{
console
.
log
(
"uploadFile"
,
uploadFile
);
imageUrl
.
value
=
URL
.
createObjectURL
(
uploadFile
.
raw
!
);
console
.
log
(
"imageUrl.value"
,
imageUrl
.
value
);
};
const
beforeAvatarUpload
:
UploadProps
[
"beforeUpload"
]
=
rawFile
=>
{
console
.
log
(
"rawFile"
,
rawFile
);
if
(
rawFile
.
type
!==
"xlsx/xls"
)
{
ElMessage
.
error
(
"文件上传类型只支持xlsx/xls!"
);
return
false
;
}
else
if
(
rawFile
.
size
/
1024
/
1024
>
2
)
{
ElMessage
.
error
(
"文件不能超过2MB!"
);
return
false
;
}
return
true
;
};
async
function
onSearch
()
{
loading
.
value
=
true
;
// const { data } = await getRoleList(toRaw(form));
// dataList.value = data.records;
const
testData
=
[
{
orderNumber
:
1
,
name
:
"厂商A"
,
abbreviation
:
"A厂"
,
creditCode
:
"123456789012345678"
,
facType
:
"类型1"
,
address
:
"北京市朝阳区"
,
officalAddress
:
"https://www.changshangA.com"
,
assDevice
:
"水质检测"
},
{
orderNumber
:
2
,
name
:
"厂商B"
,
abbreviation
:
"B厂"
,
creditCode
:
"987654321098765432"
,
facType
:
"类型2"
,
address
:
"上海市浦东新区"
,
officalAddress
:
"https://www.changshangB.com"
,
assDevice
:
"噪声检测"
},
{
orderNumber
:
3
,
name
:
"厂商C"
,
abbreviation
:
"C厂"
,
creditCode
:
"112233445566778899"
,
facType
:
"类型1"
,
address
:
"广州市天河区"
,
officalAddress
:
"https://www.changshangC.com"
,
assDevice
:
"水质检测"
},
{
orderNumber
:
4
,
name
:
"厂商D"
,
abbreviation
:
"D厂"
,
creditCode
:
"998877665544332211"
,
facType
:
"类型3"
,
address
:
"深圳市南山区"
,
officalAddress
:
"https://www.changshangD.com"
,
assDevice
:
"水质检测"
},
{
orderNumber
:
5
,
name
:
"厂商E"
,
abbreviation
:
"E厂"
,
creditCode
:
"556677889900112233"
,
facType
:
"类型2"
,
address
:
"杭州市西湖区"
,
officalAddress
:
"https://www.changshangE.com"
,
assDevice
:
"噪声检测"
},
{
orderNumber
:
6
,
name
:
"厂商F"
,
abbreviation
:
"F厂"
,
creditCode
:
"334455667788990011"
,
facType
:
"类型1"
,
address
:
"成都市武侯区"
,
officalAddress
:
"https://www.changshangF.com"
,
assDevice
:
"噪声检测"
},
{
orderNumber
:
7
,
name
:
"厂商G"
,
abbreviation
:
"G厂"
,
creditCode
:
"778899001122334455"
,
facType
:
"类型3"
,
address
:
"南京市鼓楼区"
,
officalAddress
:
"https://www.changshangG.com"
,
assDevice
:
"噪声检测"
},
{
orderNumber
:
8
,
name
:
"厂商H"
,
abbreviation
:
"H厂"
,
creditCode
:
"990011223344556677"
,
facType
:
"类型2"
,
address
:
"武汉市洪山区"
,
officalAddress
:
"https://www.changshangH.com"
,
assDevice
:
"水质检测"
}
];
dataList
.
value
=
testData
;
// pagination.total = data.total;
// pagination.pageSize = data.pageSize;
// pagination.currentPage = data.currentPage;
setTimeout
(()
=>
{
loading
.
value
=
false
;
},
500
);
}
/** 高亮当前权限选中行 */
function
rowStyle
({
row
:
{
id
}
})
{
return
{
cursor
:
"pointer"
,
background
:
id
===
curRow
.
value
?.
id
?
"var(--el-fill-color-light)"
:
""
};
}
function
handleSizeChange
(
val
:
number
)
{
console
.
log
(
`
${
val
}
items per page`
);
}
function
handleCurrentChange
(
val
:
number
)
{
console
.
log
(
`current page:
${
val
}
`
);
}
function
handleSelectionChange
(
val
)
{
multipleSelection
.
value
=
val
;
// console.log("handleSelectionChange", val);
}
/** 编辑按钮事件 */
function
handleEdit
()
{
if
(
multipleSelection
.
value
.
length
===
0
)
{
ElMessage
.
warning
(
"请选择一条数据进行编辑"
);
return
;
}
else
if
(
multipleSelection
.
value
.
length
>
1
)
{
ElMessage
.
warning
(
"只能选择一条数据进行编辑"
);
return
;
}
router
.
push
({
path
:
"/fac-manage/fac-edit"
,
query
:
{
editItem
:
JSON
.
stringify
(
multipleSelection
.
value
[
0
])
}
});
console
.
log
(
"multipleSelection"
,
multipleSelection
.
value
);
}
// const toggleSelection = (rows?: any) => {
// const { toggleRowSelection, clearSelection } = tableRef.value.getTableRef();
// if (rows) {
// rows.forEach(row => {
// toggleRowSelection(row, undefined);
// });
// } else {
// clearSelection();
// }
// };
const
goBack
=
()
=>
{
router
.
push
(
"/welcome"
);
};
const
goFacCreate
=
()
=>
{
router
.
push
(
"/fac-manage/fac-create"
);
};
onMounted
(
async
()
=>
{
onSearch
();
// const { data } = await getMenuList({ pageNum: 1, pageSize: 1000 });
});
return
{
columns
,
form
,
loading
,
searchName
,
dataList
,
imageUrl
,
pagination
,
multipleSelection
,
onSearch
,
resetForm
,
handleAvatarSuccess
,
beforeAvatarUpload
,
goBack
,
goFacCreate
,
rowStyle
,
handleSizeChange
,
handleCurrentChange
,
handleSelectionChange
,
handleEdit
};
}
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论