SZYGM1.0/src/views/systemSettings/serviceManagement/serviceEdit.vue

<template>
  <div class="airportInfo">
    <div class="wrap_id">
      <Minheader
        :is-Journal="true"
        :is-statuser="true"
        :is-Slot="true"
        @addJournalForm="addJournalForm"
        @addslotForm="addslotForm"
      >
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">当前服务ID：101</div>
            <div class="typecond">{{ typeK }}</div>
          </div>
        </template>
      </Minheader>
      <div class="diacont">
        <el-form :model="tableForm" class="w100 fw">
          <div class="outersurface pd30">
            <el-form-item label="名称" size="default">
              <el-input
                v-model="tableForm.name"
                placeholder="请输入航易行数据采集"
              />
            </el-form-item>
          </div>
          <div class="outersurface pd30">
            <el-form-item label="业务数据" size="default">
              <el-row :gutter="24">
                <el-col :span="14">
                  <el-select
                    style="width: 100%"
                    v-model="tableForm.englin"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="主动采集"
                  >
                    <el-option
                      v-for="item in tableOptionser"
                      :key="item.v ? item.v : item.planDepartureApt"
                      :label="item.k ? item.k : item.planDepartureApt"
                      :value="item.v ? item.v : item.planDepartureApt"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="10">
                  <el-select
                    style="width: 100%"
                    v-model="tableForm.two"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="异步"
                  >
                    <el-option
                      v-for="item in tableOptionser"
                      :key="item.v ? item.v : item.planDepartureApt"
                      :label="item.k ? item.k : item.planDepartureApt"
                      :value="item.v ? item.v : item.planDepartureApt"
                    >
                    </el-option>
                  </el-select> </el-col
              ></el-row>
            </el-form-item>
          </div>
          <div class="outersurface pd30">
            <el-form-item label="启动时间" size="default">
              <el-date-picker
                v-model="tableForm.time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="outersurface pd30">
            <el-form-item label="停止时间" size="default">
              <el-date-picker
                v-model="tableForm.time1"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="outersurface">
            <el-form-item label="前序输出编号" size="default">
              <el-input
                v-model="tableForm.three"
                placeholder="请输入前序输出编号"
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="wrap_config">
      <Minheader :is-statuser="true">
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">主动采集配置</div>
          </div>
        </template></Minheader
      >
      <div class="diacont">
        <el-form :model="tableForms" class="w100 fw">
          <div class="outersurface pd30">
            <el-form-item label="数据源" size="default">
              <el-select
                style="width: 100%"
                v-model="tableForms.name"
                class="input-shadow"
                filterable
                default-first-option
                clearable
                placeholder="请选择数据源"
              >
                <el-option
                  v-for="item in tableOptionser"
                  :key="item.v ? item.v : item.planDepartureApt"
                  :label="item.k ? item.k : item.planDepartureApt"
                  :value="item.v ? item.v : item.planDepartureApt"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="outersurfaces">
            <el-form-item label="详细位置" size="default">
              <el-input
                v-model="tableForms.china"
                placeholder="请输入详细位置"
              />
            </el-form-item>
          </div>
          <div class="outersurface pd30">
            <el-form-item label="计划启动时间" size="default">
              <el-date-picker
                v-model="tableForm.time"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="outersurface pd30">
            <el-form-item label="计划停止时间" size="default">
              <el-date-picker
                v-model="tableForm.time1"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="outersurface pd30">
            <el-form-item label="错误重试" size="default">
              <el-input
                v-model="tableForms.englin"
                placeholder="请输入错误重试次数"
              />
            </el-form-item>
          </div>
          <div class="outersurface pd30">
            <el-form-item label="循环次数" size="default">
              <el-input v-model="tableForms.two" placeholder="请输入循环次数" />
            </el-form-item>
          </div>
          <div class="outersurface">
            <el-form-item label="循环频率" size="default">
              <el-input
                v-model="tableForms.three"
                placeholder="请输入错误重试次数"
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="wrap_rece">
      <Minheader :is-statuser="true">
        <template #header>
          <div class="status flex-wrap">
            <div class="manageTitle">统一接收</div>
          </div>
        </template>
      </Minheader>
      <div class="diacont">
        <el-form :model="tableFormer" class="w100 fw">
          <div class="outersurface50 pd30">
            <el-form-item label="生命周期编号" size="default">
              <el-input
                v-model="tableFormer.name"
                placeholder="请输入生命周期编号"
              />
            </el-form-item>
          </div>
          <div class="outersurface50 pd30"></div>
          <div class="outersurface50 pd30">
            <el-form-item label="生命周期编号" size="default">
              <el-input
                type="textarea"
                v-model="tableFormer.china"
                placeholder="请输入生命周期编号"
              />
            </el-form-item>
          </div>
          <div class="outersurface50">
            <el-form-item label="生命周期编号" size="default">
              <el-input
                type="textarea"
                v-model="tableFormer.china"
                placeholder="请输入生命周期编号"
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="wrap_out">
      <el-row :gutter="24">
        <el-col :span="12">
          <Minheader :is-statuser="true" :is-auth="true" @addForm="addForm">
            <template #header>
              <div class="status flex-wrap">
                <div class="manageTitle">输出</div>
              </div>
            </template>
          </Minheader>
          <div class="app-containers">
            <DataTable
              :tableHeader="state.list"
              :tableData="tableData"
              :tableBtnGroup="tableBtnGroup"
              :tableProperty="{ rowKey: 'ID' }"
              @btnClick="btnClicks"
            />
          </div>
        </el-col>
        <el-col :span="12">
          <Minheader :is-statuser="true">
            <template #header>
              <div class="status flex-wrap">
                <div class="manageTitle">日志记录</div>
              </div>
            </template>
          </Minheader>
          <div class="diacont">
            <el-form :model="recordForme" class="w100 fw">
              <div class="outersurface50 pd30">
                <el-form-item label="日志存储数据源" size="default">
                  <el-select
                    style="width: 100%"
                    v-model="recordForme.name"
                    class="input-shadow"
                    filterable
                    default-first-option
                    clearable
                    placeholder="请选择数据源"
                  >
                    <el-option
                      v-for="item in tableOptionser"
                      :key="item.v ? item.v : item.planDepartureApt"
                      :label="item.k ? item.k : item.planDepartureApt"
                      :value="item.v ? item.v : item.planDepartureApt"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="outersurface50 pd30">
                <el-form-item label="详细位置" size="default">
                  <el-input
                    v-model="recordForme.china"
                    placeholder="请输入详细位置"
                  />
                </el-form-item>
              </div>
              <div class="outersurface100 pd30">
                <el-form-item label="日志输出条件" size="default">
                  <el-input
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    type="textarea"
                    v-model="recordForme.englin"
                    placeholder="请输入日志输出条件"
                  />
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
    <Dialog
      width="852px"
      :flag="flag"
      :type="type"
      :msgTitle="msgTitle"
      @resetForm="resetForm"
      @delRest="delRest"
    >
      <div class="logDialog">
        <div class="interfaceLog">
          <div class="interfaceLog_head flex">
            <div class="interfaceLog_head_time flex-wrap">
              <div class="interfaceLog_head_time_start r12">
                <el-date-picker
                  v-model="timeStart"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="default"
                  @change="timeStartChange"
                  type="datetime"
                  placeholder="选择开始日期时间"
                  default-time="00:00:00"
                >
                </el-date-picker>
              </div>
              <div class="interfaceLog_head_time_end">
                <el-date-picker
                  v-model="timeEnd"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="default"
                  @change="timeEndChange"
                  type="datetime"
                  placeholder="选择结束日期时间"
                  default-time="00:00:00"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="flex">
              <el-input
                placeholder="请输入搜索关键词"
                size="default"
                v-model="input"
                clearable
              >
              </el-input>
              <el-button
                size="mini"
                style="margin-left: 16px"
                @click="logQueryHandler"
                type="primary"
                >查询</el-button
              >
            </div>
          </div>
          <div
            v-loading="loading"
            element-loading-text="拼命加载中"
            stripe
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            class="interfaceLog_content flex-wrap"
          >
            <el-table
              :data="tableData"
              class="table"
              height="500px"
              border
              style="width: 100%; margin-top: 20px"
            >
              <el-table-column prop="logTime" width="200" label="时间">
              </el-table-column>
              <el-table-column prop="logType" width="100" label="类型">
              </el-table-column>
              <el-table-column width="200" label="位置">
                <template #default="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="scope.row.logPositionID"
                    placement="top"
                  >
                    <div class="logPositionID">
                      {{ scope.row.logPositionID }}
                    </div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column width="100" prop="resultCode" label="成败">
              </el-table-column>
              <el-table-column label="详情">
                <template #default="scope">
                  <div class="flex-wrap">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="scope.row.resultDetails"
                      placement="top"
                    >
                      <span :id="'logId' + scope.$index" class="logDetails">{{
                        scope.row.resultDetails
                      }}</span>
                    </el-tooltip>
                    <el-button
                      @click="logCopy(scope.$index)"
                      style="margin-left: 10px"
                      type="text"
                      >复制</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </Dialog>
    <Dialog
      width="852px"
      :flag="flaglod"
      :type="typelod"
      :msgTitle="msgTitlelod"
      @resetForm="resetlodForm"
      @delRest="dellodRest"
    >
      <div class="logcont">
        <Minheader :is-auth="true" :is-statuser="true" @addForm="addFormso">
          <template #header>
            <div class="status flex-wrap">
              <div class="manageTitle">插槽列表</div>
            </div>
          </template>
        </Minheader>
      </div>
      <div style="padding: 0 24px 24px 24px" class="dialog-content">
        <DataTable
          :tableHeader="states.list"
          :tableData="tableDatas"
          :tableBtnGroup="tableBtnGroup"
          :tableProperty="{ rowKey: 'ID' }"
          @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>

<script setup lang="ts">
import Minheader from '@/components/minheader/index.vue'
import DataTable from '@/components/tableTemp/index.vue'
import Dialog from '@/components/dialog/index.vue'
const tableOptionser = ref<any[]>([]) //下拉
const typeK = ref('进行中') //状态
const flag = ref(false) //弹窗开关
const flaglod = ref(false) //插槽弹窗开关
const loading = ref(false) //loding
const type = ref('') //判断是否删除
const typelod = ref('') //判断是否删除
const input = ref('') //输入搜索
const msgTitle = ref('查看日志') //弹窗标题
const msgTitlelod = ref('插槽编辑') //弹窗标题
const timeEnd = ref('') //日志结束时间
const timeStart = ref('') //日志开始时间
const flagoutput = ref(false) //输出开关
const typeoutput = ref('') //判断输出弹窗是否删除
const msgTitleoutput = ref('') //输出弹窗标题
const flagso = ref(false) //输出开关
const typeso = ref('') //判断输出弹窗是否删除
const msgTitleso = ref('') //输出弹窗标题
const tableData = ref([
  {
    name: '测试',
    china: '测试',
    englin: '测试',
    two: '测试',
  },
  {
    name: '测试',
    china: '测试',
    englin: '测试',
    two: '测试',
  },
  {
    name: '测试',
    china: '测试',
    englin: '测试',
    two: '测试',
  },
])
const tableDatas = ref([
  {
    name: '测试',
    china: '测试',
    englin: '测试',
    two: '测试',
  },
  {
    name: '测试',
    china: '测试',
    englin: '测试',
    two: '测试',
  },
  {
    name: '测试',
    china: '测试',
    englin: '测试',
    two: '测试',
  },
])
//表头
const state = reactive({
  list: [
    { label: '输出数据源', key: 'name' },
    { label: '详细位置', key: 'china' },
    { label: '数据结构', key: 'englin' },
    { label: '输出条件', key: 'two' },
  ],
  listLoading: true,
})
//表头
const states = reactive({
  list: [
    { label: '插槽名称', key: 'name' },
    { label: '插槽地址', key: 'china' },
  ],
  listLoading: true,
})
const tableBtnGroup = ref([
  {
    name: '编辑',
    className: 'editBtn',
    param: 2,
  },
  {
    name: '删除',
    className: 'delBtn',
    param: 3,
  },
])
const tableForm = reactive({
  name: '',
  china: '',
  englin: '',
  two: '',
  time: '',
  time1: '',
  three: '',
  text: '',
}) //服务id
const tableForms = reactive({
  name: '',
  china: '',
  englin: '',
  two: '',
  time: '',
  time1: '',
  three: '',
  text: '',
}) //主动采集配置
const tableFormer = reactive({
  name: '',
  china: '',
  englin: '',
  two: '',
  time: '',
  time1: '',
  three: '',
  text: '',
}) //统一接收
const recordForme = reactive({
  name: '',
  china: '',
  englin: '',
  two: '',
  time: '',
  time1: '',
  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) {
    msgTitle.value = '编辑'
    flag.value = true
    type.value = ''
    tableForm.name = index.name
    tableForm.china = index.china
    tableForm.englin = index.englin
    tableForm.two = index.two
    tableForm.three = index.three
    tableForm.text = index.text
  } else if (param === 3) {
    msgTitle.value = '删除'
    flag.value = true
    type.value = 'del'
  } else if (param === 4) {
  }
}
//查看日志
const addJournalForm = () => {
  flag.value = true
}
//取消
const resetForm = () => {
  flag.value = false
}
//删除
const delRest = () => {
  flag.value = false
}
//开启插槽
const addslotForm = () => {
  flaglod.value = true
}
//取消插槽
const resetlodForm = () => {
  flaglod.value = false
}
//删除插槽
const dellodRest = () => {
  flaglod.value = false
}
//时间限制
const timeStartChange = val => {
  if (val >= timeEnd) {
    timeStart.value = ''
  }
}
//时间限制
const timeEndChange = val => {
  if (val <= timeEnd) {
    timeEnd.value = ''
  }
}
//复制
const logCopy = index => {
  const ele = document.getElementById('logId' + index)
  const val = ele!.innerText
  try {
    const input = document.createElement('input')
    //将input的值设置为需要复制的内容
    input.value = val
    //添加input标签
    document.body.appendChild(input)
    //选中input标签
    input.select()
    //执行复制
    document.execCommand('copy')
    //移除input标签
    document.body.removeChild(input)
    // this.$message.success("复制成功");
  } catch (e) {
    // 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) {
  }
}
const logQueryHandler = () => {}
</script>

<style lang="scss" scoped>
.airportInfo {
  height: 100%;
  .wrap_id {
    height: 140px;
    background: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 24px;
  }
  .wrap_config {
    height: 196px;
    background: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 24px;
  }
  .wrap_rece {
    height: 192px;
    background: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 24px;
  }
  .wrap_out {
    height: 250px;
    background: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 24px;
    ::v-deep .el-form-item__label {
      width: 110px;
    }
  }
  .outersurface {
    width: 20%;
  }
  .outersurfaces {
    width: 80%;
  }
  .outersurface50 {
    width: 50%;
  }
  .outersurface100 {
    width: 100%;
  }
  .diacont {
    width: 100%;
    .w100 {
      width: 100%;
    }
    .fw {
      display: flex;
      flex-wrap: wrap;
    }
    .pd30 {
      padding: 0 30px 0 0;
    }
  }
}
.typecond {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #53b074;
}
.app-containers {
  height: 170px;
}
::v-deep .el-form-item__content {
  display: flex;
}
::v-deep .el-form-item__label {
  width: 100px;
}
.interfaceLog {
  padding: 0 24px 24px 24px;
}
.logcont {
  padding: 0 24px 0px 24px;
}
</style>