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

src/assets/css/index.css

@@ -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

@@ -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

+<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>