Skip to content

S
so-manage-ui
Commit 49f78eb2 authored by 赵伟庚's avatar 赵伟庚
Browse files
Options

[feat](预警列表): 预警列表静态页面及弹窗交互完成

parent c2cd7c2d
Hide whitespace changes
Inline Side-by-side
Showing with 461 additions and 160 deletions
src/assets/css/index.css
View file @ 49f78eb2
......@@ -3,22 +3,19 @@
}
/* 新增按钮颜色 */
.form-group .el-button--primary {
background-color: #264dd9 !important;
border-color: #264dd9 !important;
}
/* 返回按钮颜色 */
.from_return > .el-button--primary {
.from_return>.el-button--primary {
background-color: #edf0ff !important;
border-color: #edf0ff !important;
color: #264dd9 !important;
}
/* 取消按钮颜色 */
.form_c {
background-color: #dde4ff !important;
border-color: #dde4ff !important;
......@@ -26,7 +23,6 @@
}
/* 确定按钮颜色 */
.form_t {
background-color: #264dd9 !important;
border-color: #264dd9 !important;
......@@ -34,7 +30,6 @@
}
/* 搜索框颜色 */
.form-group .el-input__inner {
border-radius: 28px !important;
border: 1px solid #bcc1d0 !important;
......@@ -50,7 +45,6 @@
}
/* 多行文本框样式 */
.jbxx_desc textarea {
height: 150px !important;
border-radius: 8px !important;
......@@ -60,33 +54,27 @@
}
/* 面包屑文字大小 */
.el-breadcrumb {
font-size: 14px;
color: #898d9e;
}
/* 编辑颜色*/
.primary-edit {
color: #264dd9;
cursor: pointer;
}
/* 删除颜色 */
.primary-del {
color: #264dd9;
cursor: pointer;
}
.space_bet {
}
.space_bet {}
/* reset */
html {
}
html {}
html,
body {
......@@ -137,7 +125,6 @@ div {
/* reset end */
/* common */
/* #app {
height: 100%;
overflow: hidden;
......@@ -171,7 +158,7 @@ div {
align-items: flex-start;
}
.ss_card > .sc_left_container {
.ss_card>.sc_left_container {
width: 6rem;
height: 6rem;
flex-shrink: 0;
......@@ -180,19 +167,19 @@ div {
font-size: 0;
}
.ss_card > .sc_right_container {
.ss_card>.sc_right_container {
width: calc(100% - 7rem);
flex-grow: 1;
margin-left: 1.2rem;
}
.ss_card > .sc_right_container > .sc_title {
.ss_card>.sc_right_container>.sc_title {
font-size: 1.6rem;
font-weight: bold;
line-height: 2.6rem;
}
.ss_card > .sc_right_container > .sc_info {
.ss_card>.sc_right_container>.sc_info {
display: flex;
justify-content: space-between;
}
......@@ -208,7 +195,6 @@ div {
}
/* 设置抽屉的样式 */
.el-drawer__header {
display: none;
}
......@@ -220,13 +206,13 @@ div {
position: relative;
}
.from_return > .el-button--primary {
.from_return>.el-button--primary {
position: absolute;
top: 15px;
left: 20px;
}
.from_return > span {
.from_return>span {
color: #1a2236;
font-size: 16px;
}
......@@ -253,7 +239,6 @@ div {
}
/* 设置提示弹窗的样式 */
.el-dialog {
border-radius: 6px;
margin-top: 240px;
......@@ -297,7 +282,7 @@ div {
font-size: 16px;
color: #404a62;
text-align: center;
padding: 0 16px;
padding: 0 20px;
line-height: 1;
}
......@@ -314,7 +299,6 @@ div {
}
/* 设置tab切换的样式 */
.el-tabs__item.is-disabled {
color: #8890a7 !important;
}
......@@ -328,7 +312,6 @@ div {
/* .el-tabs__nav-scroll {
height: 35px;
} */
.el-tabs__nav-scroll .el-tabs__nav {
height: 40px;
}
......@@ -358,7 +341,6 @@ div {
}
/* 设置tree的样式 */
/* .el-tree {
position: static!important;
}
......@@ -367,10 +349,9 @@ div {
}
.el-tree-node__content:hover {
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0.05) 83%,
rgba(0, 0, 0, 0.05) 86%);
rgba(255, 255, 255, 0.05) 83%,
rgba(0, 0, 0, 0.05) 86%);
} */
/* .usrrole .el-tree-node:focus>.el-tree-node__content{
background: rgb(248, 249, 253) !important;
}
......@@ -412,9 +393,7 @@ border-radius:8px;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
} */
/* 左右布局 */
.flex {
height: 100%;
display: -webkit-box;
......@@ -480,7 +459,6 @@ border-radius:8px;
} */
/* 设置switch的样式 */
.switchStyle1 .el-switch__label {
position: absolute;
display: none;
......@@ -488,7 +466,6 @@ border-radius:8px;
}
/*打开时文字位置设置*/
.switchStyle1 .el-switch__label--right {
z-index: 1;
right: -10px;
......@@ -496,7 +473,6 @@ border-radius:8px;
}
/*关闭时文字位置设置*/
.switchStyle1 .el-switch__label--left {
z-index: 1;
left: 28px;
......@@ -562,7 +538,6 @@ border-radius:8px;
}
/* 自定义图表提示框小三角 */
/* .div-tip-warp {
position: relative;
line-height: 22px;
......@@ -583,7 +558,6 @@ border-radius:8px;
.triangle-position {
margin-left: 35px;
} */
.el-input__inner {
border-radius: 6px;
}
......@@ -607,7 +581,6 @@ border-radius:8px;
下拉选样式
此处勿删，apaasV3下拉选择样式统一用这个
*/
.el-select-dropdown {
border-radius: 8px;
}
......@@ -648,7 +621,6 @@ border-radius:8px;
}
/* 单选激活样式 */
.el-radio__input .el-radio__inner {
border-color: #dadee7;
background-color: #fff;
......@@ -661,7 +633,7 @@ border-radius:8px;
background-color: #fff;
}
.el-radio__input.is-checked + .el-radio__label {
.el-radio__input.is-checked+.el-radio__label {
color: #1a2236;
font-weight: 700;
}
......@@ -680,7 +652,6 @@ border-radius:8px;
}
/* 面包屑样式 */
.bread_crumb {
margin: 20px;
font-size: 14px;
......@@ -708,7 +679,6 @@ border-radius:8px;
}
/* 应用超市详情页公共样式 */
.sevice_detail {
max-width: 1340px;
padding-top: 1px;
......@@ -716,19 +686,18 @@ border-radius:8px;
}
/* common */
.apass_breadcrumb > .el-breadcrumb {
.apass_breadcrumb>.el-breadcrumb {
padding: 10px 0;
}
.apass_breadcrumb > .el-breadcrumb .el-breadcrumb__inner {
.apass_breadcrumb>.el-breadcrumb .el-breadcrumb__inner {
font-size: 14px;
font-weight: 400;
color: #898d9e;
line-height: 23px;
}
.apass_breadcrumb > .el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
.apass_breadcrumb>.el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: #242c43;
font-weight: normal;
}
......@@ -817,7 +786,7 @@ border-radius:8px;
border-color: #ebeef5;
}
.apass_table .el-table th > .cell {
.apass_table .el-table th>.cell {
color: #1a2236;
}
......@@ -896,7 +865,7 @@ border-radius:8px;
border-color: #515fe7;
}
.apass_checkbox .el-checkbox__input.is-checked + .el-checkbox__label {
.apass_checkbox .el-checkbox__input.is-checked+.el-checkbox__label {
color: #58617a;
}
......@@ -944,7 +913,6 @@ border-radius:8px;
}
/* 详情页公共样式 by xuyiming */
.apaas_detail_container {
padding: 0 20px;
}
......@@ -980,7 +948,7 @@ border-radius:8px;
margin-top: 50px;
}
.apaas_detail_container .detail_action .el-button + .el-button {
.apaas_detail_container .detail_action .el-button+.el-button {
margin-left: 30px;
}
......@@ -1051,7 +1019,7 @@ border-radius:8px;
width: 124px;
}
.apaas_steps .apaas_step .apaas_step_action .el-button + .el-button {
.apaas_steps .apaas_step .apaas_step_action .el-button+.el-button {
margin-left: 20px;
}
......@@ -1064,7 +1032,7 @@ border-radius:8px;
font-size: 0;
}
.filter_list > .filter_item {
.filter_list>.filter_item {
display: flex;
align-items: center;
margin: 0 34px 16px 0;
......@@ -1075,7 +1043,7 @@ border-radius:8px;
vertical-align: middle;
} */
.filter_list > .filter_item > .filter_title {
.filter_list>.filter_item>.filter_title {
text-align: right;
font-size: 14px;
color: #242c43;
......@@ -1105,14 +1073,14 @@ border-radius:8px;
text-align: right;
}
.filter_action > .el-button {
.filter_action>.el-button {
/* min-width: 90px; */
height: 36px;
margin-top: 16px;
padding: 12px 17px;
}
.filter_action > .el-button + .el-button {
.filter_action>.el-button+.el-button {
margin-left: 10px;
}
......@@ -1151,7 +1119,7 @@ border-radius:8px;
margin-top: 5px;
}
.meassage_detail_dialog .detail_item .full_content > .apaas_scroll {
.meassage_detail_dialog .detail_item .full_content>.apaas_scroll {
height: 176px;
overflow: auto;
}
......@@ -1172,7 +1140,6 @@ border-radius:8px;
/*
form_content
*/
.from_content1 {
width: calc(100% - 40px);
background-color: rgba(255, 255, 255, 1);
......@@ -1213,7 +1180,6 @@ border-radius:8px;
}
/* 时间控件样式 */
.el-picker-panel {
background-color: #fff !important;
border-radius: 8px !important;
......@@ -1227,10 +1193,9 @@ border-radius:8px;
background-color: #fff;
}
/*
.el-picker-panel__footer {
border-top: 1px solid #3f4864 !important;
background-color: #242c43 !important;
/* .el-picker-panel__footer {
border-top: 1px solid #3f4864 !important;
background-color: #242c43 !important;
} */
.el-picker-panel__icon-btn {
......@@ -1294,7 +1259,7 @@ border-radius:8px;
.el-time-panel {
border-radius: 8px !important;
/* border: 1px solid #3f4864 !important;
background-color: #242c43 !important; */
background-color: #242c43 !important; */
}
.el-time-panel__footer {
......@@ -1315,8 +1280,8 @@ border-radius:8px;
}
.el-time-spinner__item:hover:not(.disabled):not(.active) {
/* background-color: #264dd9 !important; */
/* border-radius: 12px !important; */
/* background-color: #264dd9 !important;
border-radius: 12px !important; */
color: #f4f7fc;
}
......@@ -1352,7 +1317,6 @@ border-radius:8px;
}
/* table select window */
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #3759be;
......@@ -1380,7 +1344,7 @@ border-radius:8px;
}
.el-select .el-input .el-select__caret {
color: #515fe7;
color: #909bb6;
}
.el-input-number__decrease,
......@@ -1548,6 +1512,7 @@ border-radius:8px;
margin-right: 10px;
overflow: hidden;
}
.flex_right {
height: calc(100% - 16px);
flex: 1;
......@@ -1565,36 +1530,44 @@ border-radius:8px;
width: 6px;
height: 6px;
}
.tree::-webkit-scrollbar-thumb {
background: #bcc1d0;
border-radius: 10px;
height: 6px;
}
.tree::-webkit-scrollbar-track {
background: transparent;
border-radius: 2px;
}
.font_bold {
font-size: 18px;
color: #202531;
font-weight: bold;
margin-bottom: 20px;
}
.header_info {
font-size: 14px;
color: #404a62;
padding-left: 20px;
}
.fr {
float: right;
}
.pl-1 {
padding-left: 1rem;
}
.label-text {
font-size: 14px;
color: #404a62;
}
.icon_eye {
font-size: 12px;
color: #a9b1c7;
......@@ -1602,14 +1575,17 @@ border-radius:8px;
vertical-align: baseline;
cursor: pointer;
}
/* 可点击文字颜色、指针样式 */
.can_click_text {
cursor: pointer;
color: #3759be;
}
.can_click_text:hover {
color: #738bd2;
}
.can_click_text:active {
color: #2c4798;
}
......@@ -1618,10 +1594,13 @@ border-radius:8px;
background-color: #f7f7f9;
font-size: 14px;
color: #404a62;
padding: 5px;
padding: 0 8px;
text-align: left;
margin: 20px 0;
margin: 16px 0;
line-height: 38px;
border-radius: 4px;
}
.danger_info {
color: #d75138;
}
......@@ -1634,9 +1613,11 @@ border-radius:8px;
border: solid 1px #b0bee8;
color: #3759be;
}
.register_btn .icon-arrow-right {
margin-left: 39px;
}
.forget_psd {
font-size: 14px;
color: #3759be;
......@@ -1658,4 +1639,4 @@ border-radius:8px;
margin-left: 8px;
background-image: url("../imgs/ic_tips.png");
background-size: contain;
}
}
\ No newline at end of file
src/page/main/forewarning/list/index.vue
View file @ 49f78eb2
......@@ -123,75 +123,59 @@
</div>
</div>
<!-- todo: 推送提醒 -->
<!-- <el-dialog
class="dialog_box"
:title="addType == 1 ? '新增' : '编辑'"
v-model="addDialog"
width="758px">
<el-form ref="bgForm" :model="formData" :rules="rules" label-width="80px" class="bg_form">
<el-form-item label="名称" prop="name">
<el-input
v-model.trim="formData.name"
show-word-limit
:maxlength="
nodeClassifyId == 'eb9c7d70-c123-42b7-8e61-dde1b022b669'
? 6
: nodeClassifyId == 'efd9ec3b-7f18-49e2-9d88-bcca022243bb'
? 4
: nodeClassifyId == '949a1138-4995-464e-97a9-424d097eb271'
? 2
: 20
"
placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="描述" prop="describe">
<el-input
v-model="formData.describe"
type="textarea"
:autosize="{ minRows: 5 }"
show-word-limit
maxlength="200"
resize="vertical"
placeholder="请输入描述"></el-input>
</el-form-item>
<el-form-item label="是否启用" prop="state" style="margin-bottom: 0px">
<el-switch
class="bg-switch-ele"
v-model="formData.state"
:active-value="1"
:inactive-value="0"
inline-prompt
active-text="是"
inactive-text="否" />
<el-dialog title="推送提醒" v-model="pushDialog" width="780px" :before-close="cancelPushDialog">
<div class="warning_info">
<bg-icon
style="font-size: 12px; color: #a9b1c7; margin-right: 8px; vertical-align: middle"
icon="#bg-ic-s-circle-tips"></bg-icon
>该推送为临时推送，可调整推送人员，仅本次有效！如固定通知人员，则前往【预警规则设置】调整预警内容
</div>
<el-form ref="pushForm" :model="pushFormData" :rules="pushRules" label-width="120px" class="bg_form">
<el-form-item label="预警工单推送" prop="method" style="margin-bottom: 24px">
<el-checkbox-group v-model="pushFormData.method">
<el-checkbox :label="1">钉钉</el-checkbox>
<el-checkbox :label="2">短信</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<user-input-table v-if="userTableFlag" ref="userTable" :data="userData" @change="changeData" />
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="addDialog = false">取 消</el-button>
<el-button type="primary" @click="addConfirm">保 存</el-button>
<el-button type="default" @click="cancelPushDialog">取消</el-button>
<el-button type="primary" @click="pushConfirm">确定</el-button>
</div>
</template>
</el-dialog> -->
</el-dialog>
<!-- todo：关闭提醒 -->
<!-- <el-dialog
<!-- 关闭提醒 -->
<el-dialog
class="dialog_box"
title="提示"
v-model="dialogDelete"
title="关闭预警"
v-model="closeWarningDialog"
width="400px"
:before-close="
() => {
dialogDelete = false;
}
">
<div>确定要删除此字典值吗？</div>
:before-close="cancelCloseWarningDialog">
<el-form ref="closeForm" :model="closeFormData" :rules="closeRules" label-width="80px" class="bg_form">
<el-form-item label="关闭备注" prop="close_notes">
<el-input
v-model="closeFormData.close_notes"
type="textarea"
:autosize="{ minRows: 2 }"
show-word-limit
maxlength="30"
resize="vertical"
placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="" prop="close_remind" style="margin-bottom: 0px">
<el-checkbox v-model="closeFormData.close_remind" label="三天内将不再推送该预警信息" />
</el-form-item>
</el-form>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="dialogDelete = false">取 消</el-button>
<el-button type="primary" @click="deleteData">确 定</el-button>
<el-button type="default" @click="cancelCloseWarningDialog">取消</el-button>
<el-button type="primary" @click="confirmClose">确定</el-button>
</div>
</template>
</el-dialog> -->
</el-dialog>
</div>
</template>
......@@ -201,11 +185,14 @@ import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
import { Search } from "@element-plus/icons-vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import userInputTable from "./user-input-table.vue";
const bgForm = ref(null);
const dataTable = ref(null);
const closeForm = ref(null);
const userTable = ref(null);
const pushForm = ref(null);
const state = reactive({
bgForm,
warningTypes: [
{
name: "全部",
......@@ -338,25 +325,28 @@ const state = reactive({
limit: 10,
}, // 表格筛选项
actionRow: null, // 当前操作的数据
dialogDelete: false, // 删除弹窗
addType: 0, //
addDialog: false,
formData: {
name: "",
describe: "",
state: 1,
p_dict_id: "",
closeWarningDialog: false, // 删除弹窗
closeFormData: {
close_notes: "",
close_remind: false,
},
closeRules: {
close_notes: [{ required: true, message: "请输入关闭备注", trigger: "blur" }],
},
pushDialog: false,
userData: [],
pushFormData: {
method: [],
},
rules: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
describe: [
{ required: true, message: "请输入描述", trigger: "blur" },
{ max: 200, message: "描述最大为200字", trigger: "blur" },
],
state: [{ required: true, message: "请选择是否启用", trigger: "change" }],
pushRules: {
method: [{ type: "array", required: true, message: "请最少选择一种推送方式", trigger: "change" }],
},
});
const userTableFlag = computed(() => {
return !!state.pushDialog;
});
const selectRows = (data) => {
state.selected = data.selection;
};
......@@ -424,7 +414,7 @@ const getTableRows = () => {
notice_people_num: 2,
push_times: 2,
last_push_time: "2020-01-01 00:00:00",
state: 1,
state: 0,
},
{
id: 2,
......@@ -474,19 +464,87 @@ const batchPush = () => {
const pushWarning = (row) => {
state.actionRow = row;
console.log("推送提醒");
state.userData = [
{
account: 1,
name: "张一",
mobile: "13111111111",
},
{
account: 2,
name: "张二二",
mobile: "13222222222",
},
{
account: 4,
name: "张四三",
mobile: "13443434344",
},
];
state.pushDialog = true;
}; // 推送提醒
const changeData = (data) => {
state.userData = data.data;
};
const cancelPushDialog = () => {
pushForm.value.resetFields();
state.pushDialog = false;
}; // 预警推送弹窗取消按钮：重置表单
const pushConfirm = () => {
pushForm.value.validate((valid) => {
if (valid) {
console.log(state.actionRow.id, state.userData);
console.log(state.pushFormData);
cancelPushDialog();
}
});
};
const closeWarning = (row) => {
state.actionRow = row;
state.closeWarningDialog = true;
console.log("关闭预警");
}; // 关闭预警
const cancelCloseWarningDialog = () => {
closeForm.value.resetFields();
state.closeWarningDialog = false;
}; // 关闭预警弹窗取消按钮：重置表单
const confirmClose = () => {
closeForm.value.validate((valid) => {
if (valid) {
console.log(state.actionRow.id);
console.log(state.closeFormData);
cancelCloseWarningDialog();
}
});
}; // 关闭预警弹窗确定按钮：提交表单
onBeforeMount(() => {
getTableRows();
});
const { headers, tableRows, tableTotal, filter, warningTypes, warningTargets, riskLevels, stateOptions } =
toRefs(state);
const {
headers,
tableRows,
tableTotal,
filter,
warningTypes,
warningTargets,
riskLevels,
stateOptions,
closeWarningDialog,
closeFormData,
closeRules,
pushDialog,
userData,
pushFormData,
pushRules,
} = toRefs(state);
</script>
<style lang="scss" scoped>
......@@ -548,7 +606,7 @@ const { headers, tableRows, tableTotal, filter, warningTypes, warningTargets, ri
width: 100%;
box-sizing: border-box;
.el-form-item {
margin-bottom: 24px;
margin-bottom: 16px;
:deep().el-form-item__label {
line-height: 36px;
height: 36px;
......@@ -557,26 +615,19 @@ const { headers, tableRows, tableTotal, filter, warningTypes, warningTargets, ri
width: 100%;
.el-textarea {
:deep().el-input__count {
bottom: -16px;
bottom: 6px;
right: 4px;
font-family: Roboto-Regular;
color: #a9b1c7;
}
}
.bg-switch-ele {
width: 52px;
height: 24px;
:deep().el-switch__core {
width: 100%;
height: 24px;
.el-switch__inner,
.el-switch__action {
top: 3px;
}
}
}
}
}
}
:deep().dialog_box {
.el-dialog__body {
padding-bottom: 0;
}
}
}
</style>
src/page/main/forewarning/list/user-input-table.vue 0 → 100644
View file @ 49f78eb2
<template>
<el-form ref="ruleFormRef" class="ruleForm" :model="tableRows" :size="formSize" :rules="formRules">
<bg-table-pro showIndex :headers="headers" :data="tableRows" ref="input-table" :border="true" :stripe="false">
<template v-slot:account="{ row, index }">
<el-form-item :prop="`[${index}].account`" :rules="formRules.account" style="width: 100%">
<el-select
v-model="row.account"
placeholder="请选择帐号"
style="width: 100%"
@change="changeAccount(row)"
:disabled="disabled">
<el-option
v-for="(item, index) in userLists"
:key="'userItem' + index"
:disabled="item.disabled"
:label="item.account"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</template>
<template v-slot:name="{ row, index }">
<el-form-item :prop="`[${index}].name`" :rules="formRules.name" style="width: 100%">
<el-input @change="changeName" placeholder="请输入姓名" :disabled="disabled" v-model.trim="row.name" />
</el-form-item>
</template>
<template v-slot:mobile="{ row, index }">
<el-form-item :prop="`[${index}].mobile`" :rules="formRules.mobile" style="width: 100%">
<el-input
@change="changeMobile"
placeholder="请输入联系方式"
:disabled="disabled"
v-model.trim="row.mobile" />
</el-form-item>
</template>
<template v-slot:action="{ row, index }">
<bg-table-btn
:disabled="disabled || !canAdd"
:click="
() => {
addParam(index);
}
"
>增加</bg-table-btn
>
<bg-table-btn
:disabled="disabled"
:click="
() => {
removeParam(row, index);
}
">
删除
</bg-table-btn>
</template>
</bg-table-pro>
</el-form>
</template>
<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, getCurrentInstance, watch, computed } from "vue";
import { v4 as uuidv4 } from "uuid";
import { validatePhone } from "@/services/rules.js";
const props = defineProps({
data: {
type: Array,
default: () => [],
},
disabled: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["change"]);
const formSize = ref("default");
const ruleFormRef = ref(null);
const formRules = reactive({
name: [
{
required: true,
message: "请输入键",
trigger: "blur",
},
{
max: 50,
message: "最多50个字符",
trigger: "blur",
},
],
account: [
{
required: true,
message: "请选择帐号",
trigger: "change",
},
],
mobile: [
{
required: true,
message: "请输入联系方式",
trigger: "blur",
},
{ validator: validatePhone, trigger: "blur" },
],
});
const headers = reactive([
{
label: "帐号",
prop: "account",
required: true,
},
{
label: "姓名",
prop: "name",
required: true,
},
{
label: "联系方式",
prop: "mobile",
required: true,
},
{
label: "操作",
prop: "action",
width: 120,
},
]);
const state = reactive({
tableRows: [],
userLists: [
{
account: "admin",
id: 1,
name: "张一",
mobile: "13111111111",
},
{
account: "ys-admin",
id: 2,
name: "张二",
mobile: "13222222222",
},
{
account: "yf-user",
id: 3,
name: "张三",
mobile: "13333333333",
},
{
account: "putong",
id: 4,
name: "张四",
mobile: "13444444444",
},
],
});
watch(
() => state.tableRows,
(n, o) => {
let list = state.tableRows.map((e) => {
return e.account;
});
state.userLists.forEach((e) => {
if (list.indexOf(e.id) > -1) {
e.disabled = true;
} else {
e.disabled = false;
}
});
},
{
deep: true,
}
);
const canAdd = computed(() => {
return state.tableRows.length >= 5 ? false : true;
}); // 最多五条数据，控制下新增按钮的禁用
onBeforeMount(() => {
initTable();
});
var initTable = () => {
if (props.data && props.data.length >= 1) {
state.tableRows = props.data;
} else {
state.tableRows = [];
addParam(0);
}
};
var createRow = () => {
return {
id: uuidv4(),
account: "",
name: "",
mobile: "",
};
};
var addParam = (index) => {
state.tableRows.splice(index + 1, 0, createRow());
};
var removeParam = (row, index) => {
state.tableRows.splice(index, 1);
if (state.tableRows.length === 0) {
addParam(0);
}
};
const changeAccount = (row) => {
state.userLists.forEach((e) => {
if (e.id == row.account) {
row.name = e.name;
row.mobile = e.mobile;
}
});
emit("change", {
type: "account",
data: state.tableRows,
});
};
const changeName = () => {
emit("change", {
type: "name",
data: state.tableRows,
});
};
const changeMobile = () => {
emit("change", {
type: "mobile",
data: state.tableRows,
});
};
var getInputData = () => {
let lastData = [];
let tempObj = {};
state.tableRows.forEach((e) => {
tempObj[e.name] = e;
});
for (const key in tempObj) {
if (key && tempObj[key].value) {
lastData.push(tempObj[key]);
}
}
return lastData;
};
const { tableRows, userLists } = toRefs(state);
//暴露获取数据方法
defineExpose({
getInputData,
initTable,
});
</script>
<style scoped></style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment