公共详情页 基础信息布局

pull/2/head
qiuhongwu 9 months ago
parent 1025d2ef8f
commit a9af2971e9

@ -114,7 +114,7 @@
} }
.hl-incard { .hl-incard {
box-shadow: none !important; box-shadow: none !important;
margin-bottom: 20px; margin: 20px 0;
padding: 0 20px; padding: 0 20px;
} }

@ -0,0 +1,195 @@
<template>
<el-card class="hl-card">
<template #header>
<span><span v-html="dialogTitle"></span></span>
</template>
<el-form label-width="120px" :model="formData" v-loading="formLoading">
<!-- 基础信息 3 竖列布局 -->
<el-card class="hl-card-info">
<template #header>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">基础信息</span>
</template>
<el-row>
<el-col :span="6">
<el-row>
<el-col>
<el-form-item label="项目名称" prop="name">
{{ formData.name }}
</el-form-item>
</el-col>
<el-col>
<el-form-item label="项目编号" prop="code">
<el-input
disabled
v-model="formData.code"
class="!w-250px"
placeholder="系统自动生成"
/>
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col>
<el-form-item label="项目名称" prop="name">
{{ formData.name }}
</el-form-item>
</el-col>
<el-col>
<el-form-item label="项目编号" prop="code">
<el-input
disabled
v-model="formData.code"
class="!w-250px"
placeholder="系统自动生成"
/>
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col>
<el-form-item label="项目名称" prop="name">
{{ formData.name }}
</el-form-item>
</el-col>
<el-col>
<el-form-item label="项目编号" prop="code">
<el-input
disabled
v-model="formData.code"
class="!w-250px"
placeholder="系统自动生成"
/>
</el-form-item>
</el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col>
<el-form-item label="项目名称" prop="name">
{{ formData.name }}
</el-form-item>
</el-col>
<el-col>
<el-form-item label="项目编号" prop="code">
<el-input
disabled
v-model="formData.code"
class="!w-250px"
placeholder="系统自动生成"
/>
</el-form-item>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
<!-- 表格类信息 -->
<el-card class="hl-card-info">
<template #header>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">表格类信息</span>
</template>
<el-row>
<el-col>
<el-card class="hl-incard">
<el-table :data="formData.tablelist" class="hl-table">
<el-table-column label="序号" type="index" width="80" fixed />
<el-table-column label="名" prop="listname" />
<el-table-column label="码" prop="listcode" />
<el-table-column label="操作" align="center" width="240" fixed="right">
<template #default="scope">
<el-button
link
type="danger"
size="small"
@click.prevent="onDeleteItem(scope.$index)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</el-card>
<!-- 附件类信息 -->
<el-card class="hl-card-info">
<template #header>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">附件信息</span>
</template>
<el-row>
<el-col>
<el-card class="hl-incard">
<el-table :data="formData.attachments" class="hl-table">
<el-table-column prop="name" label="文件名称" align="center" />
<el-table-column prop="businessFileType" label="文件类型" align="center">
<template #default="scope">
{{
getDictLabel(DICT_TYPE.HELI_BUSINESS_FILE_TYPE, scope.row.businessFileType)
}}
</template>
</el-table-column>
<el-table-column
prop="createTime"
align="center"
label="上传时间"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="danger"
size="small"
@click="handleDeleteAttachment(scope.$index, scope.row.businessFileType)"
>
删除
</el-button>
<el-button
v-if="!!scope.row.id"
link
type="primary"
size="small"
@click="downloadAttachment(scope.row.name, scope.row.url)"
>
下载
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</el-card>
</el-form>
</el-card>
</template>
<script setup lang="ts">
// import {ref,reactive} from 'vue';
const dialogTitle = ref('公共详情')
const formData = ref({
name: 123,
code: undefined,
tablelist: [
{
listname: '123',
listcode: '123'
},
{
listname: '123',
listcode: '123'
}
],
attachments: []
})
const onDeleteItem = (index) => {
formData.value.tablelist.splice(index, 1)
}
</script>
<style scoped lang="less"></style>

@ -1,4 +1,5 @@
<template> <template>
<!-- 公共详情 -->
<el-card class="hl-card"> <el-card class="hl-card">
<template #header> <template #header>
<span>编辑页</span> <span>编辑页</span>
@ -10,15 +11,14 @@
label-width="100px" label-width="100px"
v-loading="formLoading" v-loading="formLoading"
> >
<!-- 基础信息 横向布局 -->
<el-card class="hl-card-info"> <el-card class="hl-card-info">
<template #header> <template #header>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">基础信息</span> <div class="hl-card-info-icona"></div><span class="hl-card-info-text">基础信息</span>
</template> </template>
<el-row> <el-row>
<el-col :span="8"> <el-col :span="6">
<el-row> <el-form-item prop="level" label="类型">
<el-col :span="24">
<el-form-item prop="level" label="入库类型">
<el-select v-model="formData.level" clearable style="width: 100%"> <el-select v-model="formData.level" clearable style="width: 100%">
<el-option <el-option
v-for="dict in getIntDictOptions(DICT_TYPE.HELI_CUSTOMER_LEVEL)" v-for="dict in getIntDictOptions(DICT_TYPE.HELI_CUSTOMER_LEVEL)"
@ -29,60 +29,51 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="6">
<el-row> <el-form-item prop="code" label="单号">
<el-col :span="24"> <el-input v-model="formData.code" />
<el-form-item prop="name" label="入库单号" required>
<el-input v-model="formData.name" disabled />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="6">
</el-col> <el-form-item prop="code" label="单号">
<el-col :span="8">
<el-row>
<el-col :span="24">
<el-form-item prop="code" label="上游单号">
<el-input v-model="formData.code" /> <el-input v-model="formData.code" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="6">
<el-row> <el-form-item prop="code" label="单号">
<el-col :span="24"> <el-input v-model="formData.code" />
<el-form-item prop="name" label="单号日期" required>
<el-input v-model="formData.name" disabled />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="6">
<el-form-item prop="code" label="编码">
<el-input v-model="formData.code" />
</el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="6">
<el-row> <el-form-item prop="code" label="编码">
<el-col :span="24"> <el-input v-model="formData.code" />
<el-form-item prop="level" label="入库仓库">
<el-select v-model="formData.level" clearable style="width: 100%">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.HELI_CUSTOMER_LEVEL)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="6">
<el-form-item prop="code" label="编码">
<el-row> <el-input v-model="formData.code" />
<el-col :span="24">
<el-form-item prop="industry" label="单据状态">
<el-input v-model="formData.industry" disabled />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <el-col :span="6">
<el-form-item prop="code" label="编码">
<el-input v-model="formData.code" />
</el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="12">
<el-form-item label="备注" prop="description"> <el-form-item label="备注" prop="description">
<el-input type="textarea" v-model="formData.description" show-word-limit maxlength="200"/> <el-input
type="textarea"
v-model="formData.description"
show-word-limit
maxlength="200"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -90,7 +81,7 @@
<el-card class="hl-card-info"> <el-card class="hl-card-info">
<template #header> <template #header>
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">物料信息</span> <div class="hl-card-info-icona"></div><span class="hl-card-info-text">表格信息</span>
</template> </template>
<el-row> <el-row>
<el-col> <el-col>
@ -513,10 +504,10 @@ const handleBeforeUpload = (file: File) => {
const newFile: any = { const newFile: any = {
name: '', name: '',
url: '', // URL url: '', // URL
uploadTimestamp: uploadTimestamp!, uploadTimestamp: uploadTimestamp!
}; }
fileList.value.push(newFile); fileList.value.push(newFile)
} }
const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => { const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {

Loading…
Cancel
Save