AIManage/src/views/manage/calculate/view.vue

<!-- 用户管理 -->
<template>
  <div class="app-container model-detail">
    <!-- 用户新增/编辑表单 -->
    <el-card>
      <template #header><svg-icon  icon-class="pause" style="width:20px;height:20px;" />算子基本信息</template>
      <el-row>
        <el-col :lg="12" :xs="24">
          <el-form
            ref="formRef"
            v-loading="loading"
            label-width="100px"
            size="small"
          >
            <el-form-item label="算子名称">{{dataInfo.operator_name}}</el-form-item>
            <el-form-item label="算子主类型">
              {{dataInfo.oper_main_type_name}}</el-form-item
            >
            <el-form-item label="算子子类型">
              {{dataInfo.oper_sub_type_name}}</el-form-item
            >
            <el-form-item label="算子说明">
              <el-input
                v-model="dataInfo.operator_desc"
                :disabled="true"
                placeholder="请输入数据集名称"
                :rows="3"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="创建人">
              {{dataInfo.user_name}}</el-form-item
            >
            <el-form-item label="创建时间">
              {{dataInfo.create_time}}</el-form-item
            >
            <el-form-item label="算子参数">
              <el-input
                v-model="dataInfo.parametersJson"
                :disabled="true"
                placeholder="请输入算子参数"
                :rows="10"
                type="textarea"
              />
            </el-form-item>
            <!-- <el-form-item label="输出参数" prop="nickname33">
              <el-input
                v-model="dataInfo.usernamedd3"
                :disabled="true"
                placeholder="请输入数据集名称"
                :rows="3"
                type="textarea"
              />
            </el-form-item> -->
          </el-form>
        </el-col>
        <el-col :lg="12" :xs="24"> </el-col>
      </el-row>
    </el-card>
    <el-card class="card-footer">
        <el-button @click="closeBack"><i-ep-close />取 消</el-button>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import OperatorApi from '@/api/operator'

const route =useRoute()
const router = useRouter();
const loading = ref(false); //  加载状态
// 算子表单数据
const dataInfo = ref({});

/** 返回默认页面 */
function closeBack() {
    router.replace({ path: "/operatorLibrary/calculate" });
}

/** 初始化数据 */
function initData(){
  let id=route.query.id;
  loading.value = true;
  OperatorApi.findOne(id).then(res =>{
    //JSON转换
    res.data.data.parametersJson = JSON.stringify(res.data.data.parameters);
    dataInfo.value = res.data.data;
    loading.value = false;
  });
}

onMounted(() => {
  initData();
});
</script>
<style scoped lang='scss'>
.model-detail{
    :deep(.el-card__header){
        padding:8px 4px;
        display: flex;
        align-items: center
    }    
}
.sp-file{
    color:#29d;    
}
.tb-base-info{
    line-height: 30px;
}
:deep(.svg-icon){
    margin-right:8px;
}
.card-footer{
  position: fixed;
  width: calc(100% - 215px);
  bottom: 0px;
  :deep(.el-card__body){
    padding:10px;
    .el-pagination{
      justify-content: end;
    }
  }
}
</style>