xuziqiang
6 months ago
5 changed files with 907 additions and 223 deletions
@ -0,0 +1,598 @@ |
|||
<!-- @format --> |
|||
|
|||
<template> |
|||
|
|||
</template> |
|||
<script lang="ts"> |
|||
import { Modal } from 'ant-design-vue'; |
|||
import { createVNode, defineComponent, reactive, ref } from 'vue'; |
|||
import { http } from '/nerv-lib/util/http'; |
|||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; |
|||
export default defineComponent({ |
|||
name: 'OrderListIndex', |
|||
setup() { |
|||
const mainRef = ref(); |
|||
const data = reactive({}); |
|||
const data2 = reactive([ |
|||
{ |
|||
userinformation: 1, |
|||
}, |
|||
]); |
|||
const visible = ref(false); |
|||
const searchValue = ref<string>(''); |
|||
const searchValue2 = ref<string>(''); |
|||
const addformvisible = ref(false); |
|||
const treeData = [ |
|||
{ |
|||
title: '铁路总局', |
|||
key: '0-0', |
|||
children: [ |
|||
{ title: '济阳站', key: '0-0-0' }, |
|||
{ title: '临沂站', key: '0-0-1' }, |
|||
], |
|||
}, |
|||
]; |
|||
const treeData2 = [ |
|||
{ |
|||
title: '全部', |
|||
key: '0-0', |
|||
children: [ |
|||
{ title: '产品部', key: '0-0-0' }, |
|||
{ title: '运维部', key: '0-0-1' }, |
|||
], |
|||
}, |
|||
]; |
|||
|
|||
let formData = reactive({ |
|||
name: '', |
|||
zhanghao: '', |
|||
}); |
|||
let formData2 = reactive({ |
|||
information: '', |
|||
}); |
|||
|
|||
const onSearch = () => { |
|||
console.log(searchValue.value); |
|||
}; |
|||
const onSearch2 = () => { |
|||
console.log(searchValue2.value); |
|||
}; |
|||
|
|||
const handleSelect = (selectedKeys: any, info: any) => { |
|||
console.log(selectedKeys, 'selectedKeys'); |
|||
console.log(info, 'info'); |
|||
}; |
|||
const handleSelect2 = (selectedKeys: any, info: any) => { |
|||
console.log(selectedKeys, 'selectedKeys'); |
|||
console.log(info, 'info'); |
|||
}; |
|||
|
|||
const onClose = () => { |
|||
visible.value = false; |
|||
}; |
|||
const onEdit = () => { |
|||
console.log(formData, 'formData'); |
|||
visible.value = false; |
|||
}; |
|||
|
|||
const handleOk = () => { |
|||
addformvisible.value = false; |
|||
}; |
|||
const handleClose = () => { |
|||
addformvisible.value = false; |
|||
}; |
|||
|
|||
const tableConfig = { |
|||
// title: '企业管理', |
|||
api: { |
|||
url: '/carbon_emission/device/getGatewayList', |
|||
method: 'post', |
|||
}, |
|||
listField: 'data.records', |
|||
headerActions: [ |
|||
{ |
|||
label: '新增', |
|||
name: 'RoleTypeAdd', |
|||
type: 'primary', |
|||
handle: () => { |
|||
visible.value = true; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '导入', |
|||
type: 'primary', |
|||
name: 'RoleTypeAdd', |
|||
handle: () => {}, |
|||
}, |
|||
{ |
|||
label: '模板下载', |
|||
type: 'primary', |
|||
name: 'RoleTypeAdd', |
|||
handle: () => {}, |
|||
}, |
|||
{ |
|||
label: '导出', |
|||
type: 'primary', |
|||
name: 'RoleTypeAdd', |
|||
handle: () => {}, |
|||
}, |
|||
{ |
|||
label: '批量删除', |
|||
type: 'primary', |
|||
name: 'RoleTypeAdd', |
|||
handle: () => {}, |
|||
dynamicDisabled: (data: any) => { |
|||
return data.list.length === 0; |
|||
}, |
|||
confirm: true, |
|||
isReload: true, |
|||
}, |
|||
], |
|||
params: { |
|||
page: 0, |
|||
pageSize: 10, |
|||
}, |
|||
columns: [ |
|||
{ |
|||
title: '序号', |
|||
dataIndex: 'address', |
|||
width: 80, |
|||
customRender: (text: any) => { |
|||
return text.index + 1; |
|||
}, |
|||
sorter: { |
|||
compare: (a, b) => a.address - b.address, |
|||
}, |
|||
}, |
|||
{ |
|||
title: '账号', |
|||
dataIndex: 'zhanghao', |
|||
sorter: { |
|||
compare: (a, b) => a.zhanghao - b.zhanghao, |
|||
}, |
|||
}, |
|||
{ |
|||
title: '姓名', |
|||
dataIndex: 'name', |
|||
sorter: { |
|||
compare: (a, b) => a.name - b.name, |
|||
}, |
|||
}, |
|||
{ |
|||
title: '性别', |
|||
dataIndex: 'sex', |
|||
sorter: { |
|||
compare: (a, b) => a.name - b.name, |
|||
}, |
|||
}, |
|||
{ |
|||
title: '手机号', |
|||
dataIndex: 'phone', |
|||
}, |
|||
{ |
|||
title: '邮箱', |
|||
dataIndex: 'email', |
|||
}, |
|||
{ |
|||
title: '组织关系', |
|||
dataIndex: 'relation', |
|||
}, |
|||
{ |
|||
title: '部门角色', |
|||
dataIndex: 'role', |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
dataIndex: 'status', |
|||
}, |
|||
], |
|||
columnActions: { |
|||
title: '操作', |
|||
actions: [ |
|||
{ |
|||
label: '编辑', |
|||
name: 'RoleTypeEdit', |
|||
// dynamicParams: 'uuid', |
|||
handle: (record: any) => { |
|||
console.log(record, 'record'); |
|||
formData.name = record.name; |
|||
formData.zhanghao = record.zhanghao; |
|||
visible.value = true; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '冻结', |
|||
name: 'RoleTypeEdit', |
|||
handle: (record: any) => { |
|||
console.log(record, 'record'); |
|||
Modal.confirm({ |
|||
title: '是否冻结该账户', |
|||
icon: createVNode(ExclamationCircleOutlined), |
|||
content: createVNode('div', { style: 'color:red;' }, ''), |
|||
onOk() { |
|||
// http |
|||
// .post('/api/parking_merchant/objs/gateInfo/delete', { |
|||
// uuid: record.uuid, |
|||
// }) |
|||
// .then((res) => { |
|||
// mainRef.value.nsTableRef.reload(); |
|||
// }); |
|||
}, |
|||
onCancel() { |
|||
console.log('Cancel'); |
|||
}, |
|||
class: 'test', |
|||
}); |
|||
}, |
|||
}, |
|||
{ |
|||
label: '重置密码', |
|||
name: 'RoleTypeEdit', |
|||
handle: (record: any) => { |
|||
console.log(record, 'record'); |
|||
Modal.confirm({ |
|||
title: '是否重置密码', |
|||
icon: createVNode(ExclamationCircleOutlined), |
|||
content: createVNode('div', { style: 'color:red;' }, ''), |
|||
onOk() { |
|||
Modal.success({ |
|||
title: '密码重置成功,初始密码123456', |
|||
}); |
|||
}, |
|||
onCancel() { |
|||
console.log('Cancel'); |
|||
}, |
|||
class: 'test', |
|||
}); |
|||
}, |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
name: 'RoleTypeEdit', |
|||
dynamicParams: { |
|||
uuid: 'uuid', |
|||
}, |
|||
// name: 'ExitManageDelete', |
|||
handle: (record: any) => { |
|||
console.log(record, 'record'); |
|||
Modal.confirm({ |
|||
title: '确定确认删除', |
|||
icon: createVNode(ExclamationCircleOutlined), |
|||
content: createVNode('div', { style: 'color:red;' }, ''), |
|||
onOk() { |
|||
// http |
|||
// .post('/api/parking_merchant/objs/gateInfo/delete', { |
|||
// uuid: record.uuid, |
|||
// }) |
|||
// .then((res) => { |
|||
// mainRef.value.nsTableRef.reload(); |
|||
// }); |
|||
}, |
|||
onCancel() { |
|||
console.log('Cancel'); |
|||
}, |
|||
class: 'test', |
|||
}); |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
|
|||
formConfig: { |
|||
schemas: [ |
|||
{ |
|||
field: 'zhanghao', |
|||
label: '账号名', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入账号名', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'name', |
|||
label: '姓名', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入姓名', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'phone', |
|||
label: '手机号', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入手机号', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'email', |
|||
label: '邮箱', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入邮箱', |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'status', |
|||
label: '用户状态', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
placeholder: '请选择', |
|||
options: [ |
|||
{ |
|||
label: '正常', |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: '冻结', |
|||
value: 2, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
], |
|||
params: {}, |
|||
}, |
|||
// pagination: { defaultPageSize: 10 }, |
|||
rowKey: 'uuid', |
|||
}; |
|||
const tableConfig2 = { |
|||
api: { |
|||
url: '/carbon_emission/device/getGatewayList', |
|||
method: 'post', |
|||
}, |
|||
listField: 'data.records', |
|||
rowSelection: null, |
|||
headerActions: [ |
|||
{ |
|||
label: '新增', |
|||
name: 'RoleTypeAdd', |
|||
type: 'primary', |
|||
handle: () => { |
|||
addformvisible.value = true; |
|||
}, |
|||
}, |
|||
], |
|||
columns: [ |
|||
{ |
|||
title: '角色信息', |
|||
dataIndex: 'name', |
|||
}, |
|||
], |
|||
columnActions: { |
|||
title: '操作', |
|||
actions: [ |
|||
{ |
|||
label: '编辑', |
|||
name: 'RoleTypeEdit', |
|||
// dynamicParams: 'uuid', |
|||
handle: (record: any) => { |
|||
console.log(record, 'record'); |
|||
addformvisible.value = true; |
|||
// formData.name = record.name; |
|||
// formData.zhanghao = record.zhanghao; |
|||
// visible.value = true; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
name: 'RoleTypeEdit', |
|||
dynamicParams: { |
|||
uuid: 'uuid', |
|||
}, |
|||
// name: 'ExitManageDelete', |
|||
handle: (record: any) => { |
|||
console.log(record, 'record'); |
|||
Modal.confirm({ |
|||
title: '确定确认删除', |
|||
icon: createVNode(ExclamationCircleOutlined), |
|||
content: createVNode('div', { style: 'color:red;' }, ''), |
|||
onOk() { |
|||
// http |
|||
// .post('/api/parking_merchant/objs/gateInfo/delete', { |
|||
// uuid: record.uuid, |
|||
// }) |
|||
// .then((res) => { |
|||
// mainRef.value.nsTableRef.reload(); |
|||
// }); |
|||
}, |
|||
onCancel() { |
|||
console.log('Cancel'); |
|||
}, |
|||
class: 'test', |
|||
}); |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
const formSchema = reactive([ |
|||
{ |
|||
field: 'field111', |
|||
component: 'NsChildForm', |
|||
componentProps: { |
|||
title: '用户信息', |
|||
schemas: [ |
|||
{ |
|||
label: '账号', |
|||
field: 'zhanghao', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入账号', |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: false, |
|||
message: '请输入账号', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: '姓名', |
|||
field: 'name', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入姓名', |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: false, |
|||
message: '请输入姓名', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: '性别', |
|||
field: 'sex', |
|||
component: 'NsRadioGroup', |
|||
componentProps: { |
|||
radioType: 'radio', |
|||
options: [ |
|||
{ label: '男', value: 1 }, |
|||
{ label: '女', value: 2 }, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: '手机号', |
|||
field: 'phone', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入手机号', |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: false, |
|||
message: '请输入手机号', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: '邮箱', |
|||
field: 'email', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入邮箱', |
|||
}, |
|||
}, |
|||
{ |
|||
label: '组织关系', |
|||
field: 'relation', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
placeholder: '请选择组织关系', |
|||
options: [ |
|||
{ |
|||
label: '正常', |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: '冻结', |
|||
value: 2, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
]); |
|||
const formSchema2 = reactive([ |
|||
{ |
|||
field: 'information', |
|||
component: 'NsCascader', |
|||
componentProps: { |
|||
placeholder: '请选择', |
|||
options: [ |
|||
{ |
|||
value: 'zhejiang', |
|||
label: 'Zhejiang', |
|||
children: [ |
|||
{ |
|||
value: 'hangzhou', |
|||
label: 'Hangzhou', |
|||
children: [ |
|||
{ |
|||
value: 'xihu', |
|||
label: 'West Lake', |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
]); |
|||
|
|||
return { |
|||
tableConfig, |
|||
tableConfig2, |
|||
data, |
|||
data2, |
|||
mainRef, |
|||
visible, |
|||
onClose, |
|||
onEdit, |
|||
formSchema, |
|||
formData, |
|||
treeData, |
|||
treeData2, |
|||
handleSelect, |
|||
handleSelect2, |
|||
searchValue, |
|||
searchValue2, |
|||
onSearch, |
|||
onSearch2, |
|||
handleOk, |
|||
handleClose, |
|||
formSchema2, |
|||
formData2, |
|||
addformvisible, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style scoped> |
|||
.main { |
|||
display: flex; |
|||
flex: 1; |
|||
} |
|||
.left { |
|||
width: 400px; |
|||
/* height: 95vh; */ |
|||
height: 92vh; |
|||
border-right: 5px solid rgb(229, 235, 240); |
|||
} |
|||
.top { |
|||
height: 50vh; |
|||
border-bottom: 5px solid rgb(229, 235, 240); |
|||
} |
|||
.ns-table-title { |
|||
text-align: left; |
|||
height: 46px; |
|||
line-height: 46px; |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
user-select: text; |
|||
padding-left: 16px; |
|||
width: calc(100% + 32px); |
|||
} |
|||
.table { |
|||
width: 2000px; |
|||
} |
|||
.admin { |
|||
text-align: left; |
|||
height: 42px; |
|||
line-height: 42px; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
user-select: text; |
|||
padding-left: 16px; |
|||
width: calc(100% + 32px); |
|||
} |
|||
.form { |
|||
margin-left: 10px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue