更新样式
This commit is contained in:
parent
34a2984a00
commit
b31bdfec29
|
|
@ -1,283 +1,151 @@
|
|||
<template>
|
||||
<div ref="echart" class="echartDiv"></div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { choseRbgb } from '@/utils/tools'
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-gl";
|
||||
import { fa } from "element-plus/es/locale.mjs";
|
||||
import { onMounted, toRefs, ref, reactive } from "vue";
|
||||
let vehicleChart = null
|
||||
const echart = ref()
|
||||
|
||||
// 传入数据生成 option
|
||||
const optionsData = [
|
||||
{
|
||||
name: "待办",
|
||||
value: 2056,
|
||||
itemStyle: {
|
||||
echarts:'rgba(44,44,44,0.8)'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "已办",
|
||||
value: 4356,
|
||||
itemStyle: {
|
||||
color: "#00EDFE"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "未处理",
|
||||
value: 3018,
|
||||
itemStyle: {
|
||||
color: "#FEDB4B"
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "忽略",
|
||||
value: 1998,
|
||||
itemStyle: {
|
||||
color: "#FE7C2F"
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
//挂载
|
||||
onMounted(() => {
|
||||
echartInit();
|
||||
initCharts()
|
||||
window.addEventListener('resize', handleResize)
|
||||
});
|
||||
|
||||
const echartInit = () => {
|
||||
var myChart = echarts.init(echart.value);
|
||||
const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
show: false,
|
||||
opacity: 1,
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: "#fff"
|
||||
}
|
||||
const initCharts = () => {
|
||||
vehicleChart = echarts.init(echart.value)
|
||||
const colors = ['#00f0ff', '#0066ff', '#ff9900', '#00cc66']
|
||||
const countData = [
|
||||
{
|
||||
value: 2056,
|
||||
name: '待办',
|
||||
colorType: 'blue',
|
||||
color: ['#00f0ff', '#00a0cc'],
|
||||
color1: [choseRbgb('#00f0ff', 0.3), choseRbgb('#00a0cc', 0.3)]
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
length: 20,
|
||||
length2: 25
|
||||
{
|
||||
value: 4356,
|
||||
name: '已办',
|
||||
colorType: 'lightBlue',
|
||||
color: ['#0066ff', '#0044cc'],
|
||||
color1: [choseRbgb('#0066ff', 0.3), choseRbgb('#0044cc', 0.3)]
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
// radius: ["40%", "60%"],
|
||||
center: ["40%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0
|
||||
{
|
||||
value: 3018,
|
||||
name: '未处理',
|
||||
colorType: 'orange',
|
||||
color: ['#ff9900', '#cc7a00'],
|
||||
color1: [choseRbgb('#ff9900', 0.3), choseRbgb('#cc7a00', 0.3)]
|
||||
},
|
||||
{
|
||||
value: 1998,
|
||||
name: '忽略',
|
||||
colorType: 'green',
|
||||
color: ['#00cc66', '#009944'],
|
||||
color1: [choseRbgb('#00cc66', 0.3), choseRbgb('#009944', 0.3)]
|
||||
}
|
||||
});
|
||||
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||||
let option = {
|
||||
legend: {
|
||||
show: true,
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
orient: "vertical",
|
||||
data: ["待办", "已办", "未处理", "忽略"],
|
||||
top: "center",
|
||||
itemGap: 14,
|
||||
itemHeight: 8,
|
||||
itemWidth: 17,
|
||||
right: "20%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
animation: true,
|
||||
]
|
||||
vehicleChart.setOption(createChartOption(countData, colors))
|
||||
}
|
||||
|
||||
const createChartOption = (data, colors) => {
|
||||
let total = data.reduce((sum, item) => sum + item.value, 0)
|
||||
return {
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if ( params.seriesName !== "mouseoutSeries" && params.seriesName !== "pie2d") {
|
||||
return `${ params.seriesName }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${ params.color };"></span>${option.series[params.seriesIndex].pieData.value + "人"}`;
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: '60%',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff'
|
||||
},
|
||||
percentage: {
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
blue: {
|
||||
color: colors[0]
|
||||
},
|
||||
lightBlue: {
|
||||
color: colors[1]
|
||||
},
|
||||
orange: {
|
||||
color: colors[2]
|
||||
},
|
||||
green: {
|
||||
color: colors[3]
|
||||
}
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
formatter: (name) => {
|
||||
const item = data.find(d => d.name === name);
|
||||
let percentage = ((item.value / total) * 100).toFixed(2);
|
||||
return `${name} ${item.value} {${item.colorType}|(${percentage}%)}`
|
||||
}
|
||||
},
|
||||
title: {
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22
|
||||
}
|
||||
},
|
||||
backgroundColor: "rgba(0, 29, 75, 0.65)",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB"
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['55%', '70%'],
|
||||
center: ['28%', '50%'],
|
||||
data: data.map(item => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color[0] },
|
||||
{ offset: 1, color: item.color[1] }
|
||||
])
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: 'none'
|
||||
},
|
||||
z: 2
|
||||
},
|
||||
normal: {
|
||||
show: false,
|
||||
length: 20,
|
||||
length2:20
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['65%', '85%'],
|
||||
center: ['28%', '50%'],
|
||||
data: data.map(item => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color1[0] },
|
||||
{ offset: 1, color: item.color1[1] }
|
||||
])
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: 'none'
|
||||
},
|
||||
z: 1,
|
||||
silent: true
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{d}%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "14px"
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 0.01,
|
||||
bottom: "50%",
|
||||
left:'-18%',
|
||||
// environment: "rgba(255,255,255,0)",// 环境颜色
|
||||
viewControl: {
|
||||
distance: 130, //圆环的大小 ,值越大换越小
|
||||
alpha: 30, //倾斜的角度
|
||||
beta: 0,//旋转的角度
|
||||
autoRotate: false // 取消自动旋转
|
||||
}
|
||||
},
|
||||
series: series
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
};
|
||||
|
||||
function getParametricEquation(startRatio,endRatio,isSelected,isHovered,k,height) {
|
||||
// 计算
|
||||
let midRatio = (startRatio + endRatio) / 2;
|
||||
let startRadian = startRatio * Math.PI * 2;
|
||||
let endRadian = endRatio * Math.PI * 2;
|
||||
let midRadian = midRatio * Math.PI * 2;
|
||||
// 如果只有一个扇形，则不实现选中效果。
|
||||
if (startRatio === 0 && endRatio === 1) {
|
||||
isSelected = false;
|
||||
]
|
||||
}
|
||||
|
||||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||||
k = typeof k !== "undefined" ? k : 1 / 3;
|
||||
|
||||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||||
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||
|
||||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||
let hoverRate = isHovered ? 1.05 : 1;
|
||||
|
||||
// 返回曲面参数方程
|
||||
return {
|
||||
u: {
|
||||
min: -Math.PI,
|
||||
max: Math.PI * 3,
|
||||
step: Math.PI / 32
|
||||
},
|
||||
|
||||
v: {
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
step: Math.PI / 20
|
||||
},
|
||||
|
||||
x: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return (offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate);
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return (offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate);
|
||||
}
|
||||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
y: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return (offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate);
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return (offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate);
|
||||
}
|
||||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
z: function (u, v) {
|
||||
if (u < -Math.PI * 0.5) { return Math.sin(u);}
|
||||
if (u > Math.PI * 2.5) { return Math.sin(u);}
|
||||
return Math.sin(v) > 0 ? 1 * height : -1;
|
||||
}
|
||||
};
|
||||
}
|
||||
// 生成模拟 3D 饼图的配置项
|
||||
function getPie3D(pieData, internalDiameterRatio) {
|
||||
let series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
let legendData = [];
|
||||
let k = typeof internalDiameterRatio !== "undefined" ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio): 1 / 3;
|
||||
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i++) {
|
||||
sumValue += pieData[i].value;
|
||||
|
||||
let seriesItem = {
|
||||
name:typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
|
||||
type: "surface",
|
||||
parametric: true,
|
||||
wireframe: { show: false },
|
||||
pieData: pieData[i],
|
||||
pieStatus: {
|
||||
selected: false,
|
||||
hovered: false,
|
||||
k: k
|
||||
},
|
||||
};
|
||||
|
||||
if (typeof pieData[i].itemStyle != "undefined") {
|
||||
let itemStyle = {};
|
||||
typeof pieData[i].itemStyle.color != "undefined" ? (itemStyle.color = pieData[i].itemStyle.color) : null;
|
||||
typeof pieData[i].itemStyle.opacity != "undefined" ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
console.log(series[i]);
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio,series[i].pieData.endRatio,false,false,k,series[i].pieData.value);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
const handleResize = () => {
|
||||
vehicleChart?.resize()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.echartDiv {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
<div class="title">用户管理</div>
|
||||
<div class="btnBox">
|
||||
<el-button type="primary" @click="addUserHander">
|
||||
<el-icon><CirclePlus /></el-icon>
|
||||
<el-icon>
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span>新增</span>
|
||||
</el-button>
|
||||
</div>
|
||||
|
|
@ -12,43 +14,22 @@
|
|||
<div class="searchBox" ref="searchBox">
|
||||
<el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
|
||||
<el-form-item label="用户名">
|
||||
<el-input
|
||||
placeholder="请输入用户名"
|
||||
v-model="listQuery.loginName"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input placeholder="请输入用户名" v-model="listQuery.loginName" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="移动电话">
|
||||
<el-input
|
||||
placeholder="请输入移动电话"
|
||||
v-model="listQuery.phone"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input placeholder="请输入移动电话" v-model="listQuery.phone" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="身份证号">
|
||||
<el-input
|
||||
placeholder="请输入身份证号"
|
||||
v-model="listQuery.idEntityCard"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input placeholder="请输入身份证号" v-model="listQuery.idEntityCard" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="警号">
|
||||
<el-input
|
||||
placeholder="请输入警号"
|
||||
v-model="listQuery.inDustRialId"
|
||||
clearable
|
||||
></el-input>
|
||||
<el-input placeholder="请输入警号" v-model="listQuery.inDustRialId" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否包含下级">
|
||||
<el-select v-model="listQuery.isChild">
|
||||
<el-option
|
||||
v-for="item in D_BZ_SF"
|
||||
:key="item"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</el-option
|
||||
>
|
||||
<el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
|
||||
}}</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
|
@ -58,73 +39,29 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="main-box">
|
||||
<div class="treeBox" :style="{ height: treeHeight }">
|
||||
<MOSTY.DepartmentTree
|
||||
width="280px"
|
||||
placeholder="管理部门ID"
|
||||
clearable
|
||||
filterable
|
||||
:isBmId="true"
|
||||
v-model="listQuery.deptId"
|
||||
/>
|
||||
<div class="main-box" style="background: #fff">
|
||||
<div class="treeBox" :style="{ height: treeHeight }" >
|
||||
<MOSTY.DepartmentTree width="280px" placeholder="管理部门ID" clearable filterable :isBmId="true"
|
||||
v-model="listQuery.deptId" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
:height="tableHeight"
|
||||
:key="keyCount"
|
||||
>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="userName"
|
||||
align="center"
|
||||
label="用户名"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="idEntityCard"
|
||||
align="center"
|
||||
label="身份证号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="deptName"
|
||||
label="部门"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="inDustRialId"
|
||||
align="center"
|
||||
label="警号"
|
||||
>
|
||||
<el-table :data="tableData" border style="width: 100%" :height="tableHeight" :key="keyCount">
|
||||
<el-table-column sortable prop="userName" align="center" label="用户名"></el-table-column>
|
||||
<el-table-column sortable prop="idEntityCard" align="center" label="身份证号"></el-table-column>
|
||||
<el-table-column sortable prop="deptName" label="部门"></el-table-column>
|
||||
<el-table-column sortable prop="inDustRialId" align="center" label="警号">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="mobile"
|
||||
align="center"
|
||||
label="电话号码"
|
||||
></el-table-column>
|
||||
<el-table-column sortable prop="mobile" align="center" label="电话号码"></el-table-column>
|
||||
<el-table-column align="center" sortable label="性别" width="80">
|
||||
<template #default="{ row }">
|
||||
<dict-tag :options="D_BZ_XB" :value="row.sex" :tag="false" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="操作"
|
||||
fixed="right"
|
||||
width="250"
|
||||
>
|
||||
<el-table-column align="center" label="操作" fixed="right" width="250">
|
||||
<template #default="{ row }">
|
||||
<el-button @click="updateDict(row)" size="small">编辑</el-button>
|
||||
<el-dropdown
|
||||
style="margin-left: 12px; margin-right: 12px"
|
||||
@command="dropdownAction"
|
||||
>
|
||||
<el-dropdown style="margin-left: 12px; margin-right: 12px" @command="dropdownAction">
|
||||
<el-button style="" size="small" @click="handleClick">
|
||||
更多<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
|
|
@ -132,23 +69,13 @@
|
|||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
:command="commandValue('assignRoles', row)"
|
||||
>分配角色</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item :command="commandValue('restPwd', row)"
|
||||
>重置密码</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item :command="commandValue('assignRoles', row)">分配角色</el-dropdown-item>
|
||||
<el-dropdown-item :command="commandValue('restPwd', row)">重置密码</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-popconfirm
|
||||
confirm-button-text="是"
|
||||
cancel-button-text="否"
|
||||
icon-color="red"
|
||||
title="确定要删除?"
|
||||
@confirm="delRole(row)"
|
||||
>
|
||||
<el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
|
||||
@confirm="delRole(row)">
|
||||
<template #reference>
|
||||
<el-button type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
|
|
@ -157,16 +84,9 @@
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
<el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.size"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -175,263 +95,106 @@
|
|||
<span class="title">{{ isEdit ? "修改" : "新增" }}</span>
|
||||
<div>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
v-if="isEdit"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="onSave"
|
||||
:loading="buttonLoading"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button v-if="isEdit" type="primary" size="small" @click="onSave" :loading="buttonLoading">修改</el-button>
|
||||
<!-- 新增 -->
|
||||
<el-button v-else type="primary" size="small" @click="onAdd"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button v-else type="primary" size="small" @click="onAdd">保存</el-button>
|
||||
<el-button size="small" @click="closeDialog">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
class="mosty-from-wrap"
|
||||
ref="elform"
|
||||
:model="dialogForm"
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form class="mosty-from-wrap" ref="elform" :model="dialogForm" :inline="true" label-position="top"
|
||||
:rules="rules">
|
||||
<el-form-item label="部门:" prop="ssbmdm">
|
||||
<MOSTY.Department
|
||||
:placeholder="dialogForm.ssbm"
|
||||
width="280px"
|
||||
clearable
|
||||
filterable
|
||||
v-model="dialogForm.ssbmdm"
|
||||
/>
|
||||
<MOSTY.Department :placeholder="dialogForm.ssbm" width="280px" clearable filterable
|
||||
v-model="dialogForm.ssbmdm" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户昵称:" prop="userName">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="请输入用户昵称"
|
||||
clearable
|
||||
v-model="dialogForm.userName"
|
||||
/>
|
||||
<MOSTY.Other width="280px" placeholder="请输入用户昵称" clearable v-model="dialogForm.userName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="登录账号:" prop="loginName">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="请输入登录账号"
|
||||
clearable
|
||||
v-model="dialogForm.loginName"
|
||||
/>
|
||||
<MOSTY.Other width="280px" placeholder="请输入登录账号" clearable v-model="dialogForm.loginName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码:" v-if="!isEdit" prop="password">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
v-model="dialogForm.password"
|
||||
/>
|
||||
<MOSTY.Other width="280px" placeholder="请输入密码" show-password v-model="dialogForm.password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="idEntityCard">
|
||||
<MOSTY.IdentityCard
|
||||
width="280px"
|
||||
v-model="dialogForm.idEntityCard"
|
||||
@change="fn"
|
||||
clearable
|
||||
></MOSTY.IdentityCard>
|
||||
<MOSTY.IdentityCard width="280px" v-model="dialogForm.idEntityCard" @change="fn" clearable>
|
||||
</MOSTY.IdentityCard>
|
||||
</el-form-item>
|
||||
<el-form-item label="警号" prop="inDustRialId">
|
||||
<MOSTY.Other
|
||||
width="280px"
|
||||
placeholder="请输入警号"
|
||||
v-model="dialogForm.inDustRialId"
|
||||
/>
|
||||
<MOSTY.Other width="280px" placeholder="请输入警号" v-model="dialogForm.inDustRialId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位选择">
|
||||
<MOSTY.StationSelect
|
||||
width="300px"
|
||||
clearable
|
||||
filterable
|
||||
v-model="dialogForm.positionId"
|
||||
/>
|
||||
<MOSTY.StationSelect width="300px" clearable filterable v-model="dialogForm.positionId" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户类型:" prop="userType">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.userType"
|
||||
placeholder="请选择用户类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_YHLX"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
:key="dict.value"
|
||||
/>
|
||||
<el-select style="width: 100%" v-model="dialogForm.userType" placeholder="请选择用户类型">
|
||||
<el-option v-for="dict in D_BZ_YHLX" :label="dict.label" :value="dict.value" :key="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="虚拟用户:" prop="isVirtualUser">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.isVirtualUser"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_XNYH"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
:key="dict.value"
|
||||
/>
|
||||
<el-select style="width: 100%" v-model="dialogForm.isVirtualUser" placeholder="请选择">
|
||||
<el-option v-for="dict in D_BZ_XNYH" :label="dict.label" :value="dict.value" :key="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话号码:" prop="telePhone">
|
||||
<MOSTY.Phone
|
||||
width="280px"
|
||||
v-model="dialogForm.telePhone"
|
||||
maxlength="11"
|
||||
clearable
|
||||
></MOSTY.Phone>
|
||||
<MOSTY.Phone width="280px" v-model="dialogForm.telePhone" maxlength="11" clearable></MOSTY.Phone>
|
||||
</el-form-item>
|
||||
<el-form-item label="移动电话:" prop="mobile">
|
||||
<MOSTY.Phone
|
||||
width="280px"
|
||||
v-model="dialogForm.mobile"
|
||||
maxlength="11"
|
||||
clearable
|
||||
></MOSTY.Phone>
|
||||
<MOSTY.Phone width="280px" v-model="dialogForm.mobile" maxlength="11" clearable></MOSTY.Phone>
|
||||
</el-form-item>
|
||||
<el-form-item label="民族:" prop="nation">
|
||||
<MOSTY.PackageSelect
|
||||
width="280px"
|
||||
v-model="dialogForm.nation"
|
||||
dictEnum="NATION"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
<MOSTY.PackageSelect width="280px" v-model="dialogForm.nation" dictEnum="NATION" clearable filterable />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别:" prop="sex">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.sex"
|
||||
placeholder="请选择性别"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in D_BZ_XB"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
<el-select style="width: 100%" v-model="dialogForm.sex" placeholder="请选择性别">
|
||||
<el-option v-for="(item, index) in D_BZ_XB" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="文化程度:" prop="whcd">
|
||||
<MOSTY.PackageSelect
|
||||
dictEnum="EDUCATION"
|
||||
width="280px"
|
||||
v-model="dialogForm.whcd"
|
||||
clearable
|
||||
filterable
|
||||
/>
|
||||
<MOSTY.PackageSelect dictEnum="EDUCATION" width="280px" v-model="dialogForm.whcd" clearable filterable />
|
||||
</el-form-item>
|
||||
<el-form-item label="E-mail" prop="email">
|
||||
<MOSTY.Email
|
||||
v-model="dialogForm.email"
|
||||
width="280px"
|
||||
clearable
|
||||
></MOSTY.Email>
|
||||
<MOSTY.Email v-model="dialogForm.email" width="280px" clearable></MOSTY.Email>
|
||||
</el-form-item>
|
||||
<el-form-item label="出生日期" prop="birthday">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.birthday"
|
||||
type="date"
|
||||
placeholder="出生日期"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
<el-date-picker style="width: 100%" v-model="dialogForm.birthday" type="date" placeholder="出生日期"
|
||||
format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属模块:" prop="politic">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.politic"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_ZZMM"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
:key="dict.value"
|
||||
/>
|
||||
<el-select style="width: 100%" v-model="dialogForm.politic" placeholder="请选择">
|
||||
<el-option v-for="dict in D_BZ_ZZMM" :label="dict.label" :value="dict.value" :key="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="婚姻状况:" prop="marital">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.marital"
|
||||
placeholder="请选择婚姻状况"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_HYZK"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
:key="dict.value"
|
||||
/>
|
||||
<el-select style="width: 100%" v-model="dialogForm.marital" placeholder="请选择婚姻状况">
|
||||
<el-option v-for="dict in D_BZ_HYZK" :label="dict.label" :value="dict.value" :key="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="人员类别:" prop="type">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.type"
|
||||
placeholder="请选择人员类别"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_RYLB"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
:key="dict.value"
|
||||
/>
|
||||
<el-select style="width: 100%" v-model="dialogForm.type" placeholder="请选择人员类别">
|
||||
<el-option v-for="dict in D_BZ_RYLB" :label="dict.label" :value="dict.value" :key="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="有效期:" prop="endTime">
|
||||
<el-date-picker
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.endTime"
|
||||
type="datetime"
|
||||
placeholder="请选择有效期"
|
||||
format="YYYY/MM/DD hh:mm:ss"
|
||||
value-format="x"
|
||||
/>
|
||||
<el-date-picker style="width: 100%" v-model="dialogForm.endTime" type="datetime" placeholder="请选择有效期"
|
||||
format="YYYY/MM/DD hh:mm:ss" value-format="x" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否融合">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dialogForm.sfrh"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in D_BZ_SF"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
:key="dict.value"
|
||||
/>
|
||||
<el-select style="width: 100%" v-model="dialogForm.sfrh" placeholder="请选择">
|
||||
<el-option v-for="dict in D_BZ_SF" :label="dict.label" :value="dict.value" :key="dict.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 100%" label="备注">
|
||||
<el-input
|
||||
v-model="dialogForm.bz"
|
||||
show-word-limit
|
||||
maxlength="200"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
></el-input>
|
||||
<el-input v-model="dialogForm.bz" show-word-limit maxlength="200" :autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<RolesDialog
|
||||
v-model="roleDialogVisible"
|
||||
:userId="currentUserId"
|
||||
@updateRole="handleFilter"
|
||||
></RolesDialog>
|
||||
<RolesDialog v-model="roleDialogVisible" :userId="currentUserId" @updateRole="handleFilter"></RolesDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -687,7 +450,7 @@ const closeDialog = () => {
|
|||
dialogFormVisible.value = false;
|
||||
};
|
||||
|
||||
const moreAction = (e, item) => {};
|
||||
const moreAction = (e, item) => { };
|
||||
|
||||
//分配角色
|
||||
const currentUserId = ref("");
|
||||
|
|
@ -704,7 +467,7 @@ const restPwd = (row) => {
|
|||
handleFilter();
|
||||
});
|
||||
};
|
||||
const handleClick = (e) => {};
|
||||
const handleClick = (e) => { };
|
||||
|
||||
//watch监听路由变化
|
||||
watch(roleDialogVisible, (val) => {
|
||||
|
|
@ -782,5 +545,4 @@ onUnmounted(() => {
|
|||
// width: 380px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
// }</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user