服务弹窗

src/views/systemSettings/serviceManagement/serviceMonitorEdit.vue

@@ -225,7 +225,7 @@
     <div class="wrap_out">
       <el-row :gutter="24">
         <el-col :span="12">
-          <Minheader :is-statuser="true" :is-auth="true">
+          <Minheader :is-statuser="true" :is-auth="true" @addForm="addForm">
             <template #header>
               <div class="status flex-wrap">
                 <div class="manageTitle">输出</div>
@@ -238,7 +238,7 @@
               :tableData="tableData"
               :tableBtnGroup="tableBtnGroup"
               :tableProperty="{ rowKey: 'ID' }"
-              @btnClick="btnClick"
+              @btnClick="btnClicks"
             />
           </div>
         </el-col>
@@ -421,7 +421,7 @@
       @delRest="dellodRest"
     >
       <div class="logcont">
-        <Minheader :is-auth="true" :is-statuser="true">
+        <Minheader :is-auth="true" :is-statuser="true" @addForm="addFormso">
           <template #header>
             <div class="status flex-wrap">
               <div class="manageTitle">插槽列表</div>
@@ -435,10 +435,86 @@
           :tableData="tableDatas"
           :tableBtnGroup="tableBtnGroup"
           :tableProperty="{ rowKey: 'ID' }"
-          @btnClick="btnClick"
+          @btnClick="btnClickso"
         />
       </div>
     </Dialog>
+    <Dialog
+      :flag="flagoutput"
+      :type="typeoutput"
+      :msgTitle="msgTitleoutput"
+      @resetForm="resetFormot"
+      @delRest="delRestout"
+    >
+      <div class="diacont">
+        <el-form :model="outputForm">
+          <el-row :gutter="24">
+            <el-col>
+              <el-form-item label="输出数据源" size="default">
+                <el-input
+                  v-model="outputForm.name"
+                  placeholder="请输入输出数据源"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col>
+              <el-form-item label="详细位置" size="default">
+                <el-input
+                  v-model="outputForm.china"
+                  placeholder="请输入详细位置"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col>
+              <el-form-item label="数据结构" size="default">
+                <el-input
+                  v-model="outputForm.englin"
+                  placeholder="请输入数据结构"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col>
+              <el-form-item label="输出条件" size="default">
+                <el-input
+                  v-model="outputForm.two"
+                  placeholder="请输入输出条件"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </Dialog>
+    <Dialog
+      :flag="flagso"
+      :type="typeso"
+      :msgTitle="msgTitleso"
+      @resetForm="resetsoForm"
+      @delRest="delsoout"
+    >
+      <div class="diacont">
+        <el-form :model="soltForm">
+          <el-row :gutter="24">
+            <el-col>
+              <el-form-item label="插槽名称" size="default">
+                <el-input
+                  v-model="soltForm.name"
+                  placeholder="请输入插槽名称"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col>
+              <el-form-item label="插槽地址" size="default">
+                <el-input
+                  v-model="soltForm.china"
+                  placeholder="请输入插槽名称"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </Dialog>
   </div>
 </template>
 
@@ -458,6 +534,12 @@ const msgTitle = ref<String>("查看日志"); //弹窗标题
 const msgTitlelod = ref<String>("插槽编辑"); //弹窗标题
 const timeEnd = ref<String>(""); //日志结束时间
 const timeStart = ref<String>(""); //日志开始时间
+const flagoutput = ref<Boolean>(false); //输出开关
+const typeoutput = ref<String>(""); //判断输出弹窗是否删除
+const msgTitleoutput = ref<String>(""); //输出弹窗标题
+const flagso = ref<Boolean>(false); //输出开关
+const typeso = ref<String>(""); //判断输出弹窗是否删除
+const msgTitleso = ref<String>(""); //输出弹窗标题
 const tableData = ref([
   {
     name: "测试",
@@ -568,6 +650,26 @@ const recordForme = reactive({
   three: "",
   text: "",
 }); //日志记录
+const outputForm = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  time: "",
+  time1: "",
+  three: "",
+  text: "",
+}); //输出弹窗内容
+const soltForm = reactive({
+  name: "",
+  china: "",
+  englin: "",
+  two: "",
+  time: "",
+  time1: "",
+  three: "",
+  text: "",
+}); //插槽弹窗内容
 //编辑-删除
 const btnClick = (row, index, param) => {
   if (param === 2) {
@@ -644,6 +746,72 @@ const logCopy = (index) => {
     // this.$message.error("复制失败");
   }
 };
+//新增输出
+const addForm = () => {
+  msgTitleoutput.value = "新增输出";
+  flagso.value = true;
+  typeoutput.value = "";
+};
+//输出删除
+const delRestout = () => {
+  flagoutput.value = false;
+};
+//输出取消
+const resetFormot = () => {
+  flagoutput.value = false;
+};
+//输出编辑-删除
+const btnClicks = (row, index, param) => {
+  if (param === 2) {
+    msgTitleoutput.value = "编辑";
+    flagoutput.value = true;
+    typeoutput.value = "";
+    outputForm.name = index.name;
+    outputForm.china = index.china;
+    outputForm.englin = index.englin;
+    outputForm.two = index.two;
+    outputForm.three = index.three;
+    outputForm.text = index.text;
+  } else if (param === 3) {
+    msgTitleoutput.value = "删除";
+    flagoutput.value = true;
+    typeoutput.value = "del";
+  } else if (param === 4) {
+  }
+};
+//新增插槽
+const addFormso = () => {
+  msgTitleso.value = "新增插槽";
+  flagso.value = true;
+  typeso.value = "";
+};
+//取消插槽
+const resetsoForm = () => {
+  flagso.value = false;
+};
+//插槽新增删除
+const delsoout = () => {
+  flagso.value = false;
+};
+//插槽编辑-删除
+const btnClickso = (row, index, param) => {
+  if (param === 2) {
+    msgTitleso.value = "编辑";
+    flagso.value = true;
+    typeso.value = "";
+    soltForm.name = index.name;
+    soltForm.china = index.china;
+    soltForm.englin = index.englin;
+    soltForm.two = index.two;
+    soltForm.three = index.three;
+    soltForm.text = index.text;
+  } else if (param === 3) {
+    msgTitleso.value = "删除";
+    flagso.value = true;
+    typeso.value = "del";
+  } else if (param === 4) {
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -728,6 +896,6 @@ const logCopy = (index) => {
   padding: 0 24px 24px 24px;
 }
 .logcont {
-  padding: 0 24px 24px 24px;
+  padding: 0 24px 0px 24px;
 }
 </style>