xiaodou-ai-admin/src/pages/cvs/operator/manage.vue

<template>
    <a-card title="算子管理" >
                <table-pro
                    :service="OperatorController.page"
                    :serviceParams="{aiName}"
                    :columns="columns"
                    ref="tableProDom"
                    @add="openModal"
                >
                    <template #search >
                        <a-space>
                            <input-tsx v-model:value="aiName" placeholder="请输入算子名称" />
                            <a-button type="primary" @click="search" >搜索</a-button>
                        </a-space>
                    </template>
                    <template #render="{column, record}"  >
                        <template v-if="column.key === 'action'" >
                          <a-space>
                            <a @click="updateName(record)" >更改名称</a>
                            <a @click="pushVersion(record)" >新增版本</a>
                            <a-popconfirm
                              title="确实要删除吗？"
                              ok-text="确定"
                              cancel-text="取消"
                              @confirm="delOperator(record)"
                            >
                            <a >删除</a>
                          </a-popconfirm>
                          </a-space>
                        </template>
                    </template>
                </table-pro>
            </a-card>
<modal-pro
    width="800px"
    :label="state.modalType === 'add' ? '创建算子' :'修改名称' "
    :open="state.visible"
    @cancel="closeModal"
    @ok="submit"
>
    <a-form  style="width: 100%;" :labelCol="{span: 3}" :wrapperCol="{span: 14}" >
      <a-form-item label="算子ID" v-if="state.modalType === 'add'"  v-bind="validateInfos.aiId" extra="仅支持小写字母、数字、中划线，64字符以内，小写字母开头"  >
        <InputTsx allowClear placeholder="请输入算子ID" v-model:value="operatorState.aiId" />
      </a-form-item>
      <a-form-item label="算子名称"  v-bind="validateInfos.aiName"  >
        <InputTsx allowClear placeholder="请输入算子名称" v-model:value="operatorState.aiName" />
      </a-form-item>
      <a-form-item label="算子类型" v-if="state.modalType === 'add'" v-bind="validateInfos.aiModelType"  >
        <a-select
          ref="select"
          v-model:value="operatorState.aiModelType"
          style="width: 120px"
        >
          <a-select-option v-for="item in state.type" :key="item.code" :value="item.code">{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
</modal-pro>

</template>
<script lang='ts' setup >
import { OperatorController } from '@/controller'
import { onMounted, reactive, ref } from 'vue'
import { Form } from 'ant-design-vue'
import { InputTsx, SelectTsx } from '@/components/MicroComponents'
import { useRouter } from 'vue-router'

const useForm = Form.useForm

const router = useRouter()

const aiName = ref('')

const tableProDom = ref()

const columns = [
  {
    title: '算子ID',
    dataIndex: 'aiId',
    key: 'aiId'
  },
  {
    title: '算子名称',
    dataIndex: 'aiName',
    key: 'aiName'
  },
  {
    title: '来源',
    dataIndex: 'aiSourceType',
    key: 'aiSourceType'
  },
  {
    title: '业务类型',
    dataIndex: 'aiModelType',
    key: 'aiModelType'
  },
  {
    title: '最近版本',
    dataIndex: 'recentlyAiVersion',
    key: 'recentlyAiVersion'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const state = reactive<{
  visible: boolean,
  type: {code: string; name: string;}[],
  updateNameVisible: boolean,
  modalType: 'add' | 'update'
}>({
  visible: false,
  updateNameVisible: false,
  type: [],
  modalType: 'add'
})

const operatorState = reactive<CVS.Operator>({
  aiId: '',
  aiName: '',
  aiModelType: null
})

const { resetFields, validate, validateInfos } = useForm(operatorState, {
  aiId: [{ required: true, message: '请填写aiId' }],
  aiName: [{ required: true, message: '请填写算子名称' }],
  aiModelType: [{ required: true, message: '请选择算子类型' }]
})

const submit = () => {
  validate().then(async () => {
    state.modalType === 'add' ? await OperatorController.add(operatorState) : await OperatorController.upadteName(operatorState.id! as unknown as string, operatorState.aiName)
    closeModal()
    tableProDom.value.reload()
  }).catch(() => {})
}

const delOperator = async (record) => {
  await OperatorController.del(record.id)
  tableProDom.value.reload()
}

const search = () => {
  tableProDom.value.reload()
}

const closeModal = () => {
  state.visible = false
}

const openModal = () => {
  state.visible = true
  state.modalType = 'add'
  resetFields({})
}

const getOperatorType = async () => {
  state.type = await OperatorController.type()
}

const updateName = async (record) => {
  const data = await OperatorController.byId(record.id)
  resetFields(data)
  state.modalType = 'update'
  state.visible = true
}

const pushVersion = (record) => {
  router.push({ path: '/cvs/operator/version', query: { aiId: record.id } })
}

onMounted(() => {
  getOperatorType()
})

</script>
<style lang='less' scoped >
</style>