xps-web-v5/src/views/paas/atu/index.vue

<route lang="yaml">
meta:
  enabled: false
</route>

<script lang="ts" setup name="PagesExampleTable">
import type { FormInstance } from 'element-plus'
import ModelObjectSelector from './components/ModelObjectSelector.vue'
import useSettingsStore from '@/store/modules/settings'
import { getApiById } from '@/api/paas/apiApi'
import { getAtuByList } from '@/api/paas/apiTransUnitApi'

const settingsStore = useSettingsStore()
const route = useRoute()
const router = useRouter()
const tabbar = useTabbar()

const modId = parseInt(route.params.modId.toString())
const apiId = parseInt(route.params.apiId.toString())

const state = reactive({
  loading: false,
  apiTitle: '',
  apiCode: '',
  keywords: '',
  atuList: [],
  dialogState: 1,
  search: {
    apiId,
    keywords: '',
  },
  data: '',
  result: '',
})

const ModelObjectSelectorRef = ref()
const getAtuData = async () => {
  const { data } = await getAtuByList(state.search)
  state.atuList = data
  state.loading = false
}

// 查询数据
const getData = async () => {
  state.loading = true
  const { data } = await getApiById(modId, apiId)
  state.apiTitle = data.apiTitle
  state.apiCode = data.apiCode
  await getAtuData()
}

onMounted(() => {
  getData()
})

const formRef = ref<FormInstance>()

const onAdd = () => {
  ModelObjectSelectorRef.value.showModel()
}

const onEdit = (data: { atuId: number }) => {
  window.console.log(data.atuId)
}

const onDelete = (data: { atuId: number }) => {
  window.console.log(data.atuId)
}

const onGenerateData = () => {
  state.result = '生成参数'
}

const onExecute = () => {

}
// 选择对象模型回调
const onObjectSel = (data: any) => {
  window.console.log('onObjectSel', data)
}

// function onCancel() {
//   goBack()
// }

// 返回列表页
function goBack() {
  if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
    tabbar.close({ name: 'paas_api' })
  }
  else {
    router.push({ name: 'paas_api' })
  }
}
</script>

<template>
  <div class="absolute-container">
    <page-header :title="state.apiTitle">
      <el-button size="default" round @click="goBack">
        <template #icon>
          <el-icon>
            <svg-icon name="i-ep:arrow-left" />
          </el-icon>
        </template>
        返回
      </el-button>
    </page-header>
    <div class="page-main">
      <LayoutContainer left-side-width="520px" hide-left-side-toggle>
        <template #leftSide>
          <el-space wrap>
            <el-button type="primary" size="default" @click="onAdd">
              <template #icon>
                <el-icon>
                  <svg-icon name="i-ep:plus" />
                </el-icon>
              </template>
            </el-button>
          </el-space>

          <el-table v-loading="state.loading" class="list-table" :data="state.atuList" border stripe highlight-current-row height="100%">
            <el-table-column prop="atuTitle" label="名称" min-width="150px" />
            <el-table-column label="操作" width="140" align="center" fixed="right">
              <template #default="scope">
                <el-button-group>
                  <el-button type="primary" size="small" plain @click="onEdit(scope.row)">
                    <template #icon>
                      <el-icon>
                        <svg-icon name="i-ep:edit" />
                      </el-icon>
                    </template>
                  </el-button>

                  <el-button type="danger" size="small" plain @click="onDelete(scope.row)">
                    <template #icon>
                      <el-icon>
                        <svg-icon name="i-ep:delete" />
                      </el-icon>
                    </template>
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </template>

        <div class="form">
          <tool-header>
            <template #right>
              <el-button type="primary" @click="onGenerateData">
                生成参数
              </el-button>
            </template>
          </tool-header>
          <el-form ref="formRef" label-width="100px" label-position="top">
            <el-form-item label="数据参数" prop="code">
              <el-input v-model="state.data" type="textarea" rows="10" placeholder="数据" />
            </el-form-item>
            <el-form-item v-if="state.result" label="生成参数" prop="code">
              <el-input v-model="state.result" type="textarea" rows="10" placeholder="数据" readonly />
            </el-form-item>
            <div class="action-bottom">
              <el-button type="primary" @click="onExecute">
                立即执行
              </el-button>
            </div>
          </el-form>
          <ModelObjectSelector ref="ModelObjectSelectorRef" @on-object-sel="onObjectSel" />
        </div>
      </LayoutContainer>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.absolute-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .page-header {
    margin-bottom: 0;
  }

  .page-main {
    // 让 page-main 的高度自适应
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;

    .flex-container {
      position: static;

      :deep(.left-side) {
        overflow: auto;
        display: flex;
        flex-direction: column;
      }

      :deep(.main-container) {
        height: 100%;
        display: flex;
        flex-direction: column;

        .empty {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32px;
          color: var(--el-text-color-placeholder);
        }
      }
    }

    .form {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;

      .el-form {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;

        .columns-table {
          flex: 1;
          height: 0;
          display: flex;
          flex-direction: column;

          :deep(.el-form-item__content) {
            min-height: 0;

            .el-table {
              height: 100%;
            }
          }
        }
      }

      .action-bottom {
        padding-top: 2px;
        text-align: center;
      }

      .el-table {
        .el-table__row {
          .index {
            display: inline-block;
          }

          .delete {
            display: none;
          }

          &:hover {
            .index {
              display: none;
            }

            .delete {
              display: inline-block;
            }
          }

          .el-tag.sortable,
          .el-tag.sortable .el-icon {
            cursor: s-resize;
          }
        }
      }
    }

  }
}
</style>