init
This commit is contained in:
92
src/views/lowexample/form/AcrossForm.vue
Normal file
92
src/views/lowexample/form/AcrossForm.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<!-- 基础类型表单与表单设计 -->
|
||||
<ContentWrap>
|
||||
<div v-for="item in stepList" :key="item.refKey">
|
||||
<div class="pl-8px b-l-6px b-solid b-#409EFF title">{{ item.title }}</div>
|
||||
<div class="mb-20px" v-if="item.type == 'exploit'">
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="item.defaultData"
|
||||
:showButton="false"
|
||||
:formId="item.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
<div class="mt-20px mb-40px" v-if="item.type == 'design'">
|
||||
<LowTable :tableId="item.formId" :enhanceData="item.enhanceData"></LowTable>
|
||||
</div>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||||
|
||||
defineOptions({ name: 'AcrossForm' })
|
||||
const basicDefaultData = reactive({
|
||||
customer_name: '广州某科技有限公司',
|
||||
customer_rating: 3,
|
||||
customer_source: '3',
|
||||
customer_status: '4',
|
||||
now_city: '120000,120100,120102',
|
||||
system_number: '202010033',
|
||||
type_of_industry: '4',
|
||||
update_date: '2024-01-23 23:23:23',
|
||||
vesting_officer: '1836227753657548801'
|
||||
})
|
||||
|
||||
const detailDefaultData = reactive({
|
||||
company_tax: '91645530MA5FQY4QGB',
|
||||
company_tel: '15238680350',
|
||||
company_web: 'http://www.xx.cn',
|
||||
current_title: '2',
|
||||
deposit_bank: '建设银行广州白云支行',
|
||||
detailed_address: '440000,440100,440111',
|
||||
head_contact: '1836227753657548801',
|
||||
invoice_title: '发票抬头',
|
||||
phone_number: '15239683355'
|
||||
})
|
||||
|
||||
const financialEnhanceData = reactive({
|
||||
hideHeader: 'disabled'
|
||||
})
|
||||
|
||||
const stepList = ref([
|
||||
{
|
||||
refKey: 'basic',
|
||||
title: '基本信息',
|
||||
type: 'exploit',
|
||||
formId: '1833063456320286721',
|
||||
defaultData: basicDefaultData
|
||||
},
|
||||
{
|
||||
refKey: 'detail',
|
||||
title: '详细信息',
|
||||
type: 'exploit',
|
||||
formId: '1833076541672169474',
|
||||
defaultData: detailDefaultData
|
||||
},
|
||||
{
|
||||
refKey: 'financial',
|
||||
title: '下级客户',
|
||||
type: 'design',
|
||||
formId: '1833323260582391810',
|
||||
enhanceData: financialEnhanceData
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
height: 18px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
color: #666670;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
506
src/views/lowexample/form/InfoManage.vue
Normal file
506
src/views/lowexample/form/InfoManage.vue
Normal file
@@ -0,0 +1,506 @@
|
||||
<template>
|
||||
<!-- 基础类型表单与表单设计 -->
|
||||
<ContentWrap>
|
||||
<!-- <div v-for="item in stepList" :key="item.refKey">
|
||||
<div class="pl-8px b-l-6px b-solid b-#409EFF title">{{ item.title }}</div>
|
||||
<div class="mb-20px" v-if="item.type == 'exploit'">
|
||||
<FormView
|
||||
formType="edit"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="item.defaultData"
|
||||
:showButton="false"
|
||||
:formId="item.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
<div class="mt-20px mb-40px" v-if="item.type == 'design'">
|
||||
<LowTable :tableId="item.formId" :enhanceData="item.enhanceData"></LowTable>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="header">
|
||||
<Header />
|
||||
</div>
|
||||
<div class="content_form">
|
||||
<el-form :model="formData" ref="formRef" :rules="rules" label-width="100px" class="form-content">
|
||||
<el-row :gutter="20">
|
||||
<!-- 申请说明和申请单号 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="申请说明" prop="applicationDesc">
|
||||
<el-input v-model="formData.applicationDesc" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="申请单号" prop="applicationNo">
|
||||
<el-input v-model="formData.applicationNo" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<!-- 需求单位和外协单位 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="需求单位" prop="demandUnit">
|
||||
<el-select v-model="formData.demandUnit" placeholder="请选择" clearable>
|
||||
<el-option label="创新院" value="创新院"></el-option>
|
||||
<el-option label="技术部" value="技术部"></el-option>
|
||||
<el-option label="市场部" value="市场部"></el-option>
|
||||
<el-option label="行政部" value="行政部"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="外协单位" prop="cooperationUnit">
|
||||
<el-select v-model="formData.cooperationUnit" placeholder="请选择" clearable>
|
||||
<el-option label="软件通力" value="软件通力"></el-option>
|
||||
<el-option label="数据服务公司" value="数据服务公司"></el-option>
|
||||
<el-option label="科技发展有限公司" value="科技发展有限公司"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<!-- 申请时间和人数 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="申请时间" prop="applicationTime">
|
||||
<el-date-picker v-model="formData.applicationTime" type="date" placeholder="请选择" format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD" clearable></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="人数" prop="personCount">
|
||||
<el-input v-model.number="formData.personCount" placeholder="请输入" type="number" min="1"
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 备注 -->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remarks">
|
||||
<el-input v-model="formData.remarks" placeholder="请输入" type="textarea" rows="4" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<!-- <el-row>
|
||||
<el-col :span="24" class="form-actions">
|
||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="person_info">
|
||||
<div class="info_title">人员信息</div>
|
||||
<div class="info_btn">
|
||||
<el-button type="primary" @click="addInfo">新增</el-button>
|
||||
<el-button type="primary">导入</el-button>
|
||||
</div>
|
||||
<div class="info_table">
|
||||
<el-table :data="tableData" border stripe style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
|
||||
:cell-style="{ 'text-align': 'center' }">
|
||||
<el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>
|
||||
<el-table-column prop="idCard" label="身份证号" min-width="180" align="center"></el-table-column>
|
||||
<el-table-column prop="gender" label="性别" width="100" align="center"></el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="primary" text @click="handleEdit(scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" text @click="handleDelete(scope.$index,scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<BottomBtn />
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" title="人员信息表单" :width="isFullscreen ? '100%' : '70%'"
|
||||
:height="isFullscreen ? '100%' : 'auto'" :top="isFullscreen ? '0' : '15vh'" :modal="!isFullscreen"
|
||||
@close="handleClose" class="person-info-dialog">
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center w-full">
|
||||
<span>人员信息表单</span>
|
||||
<!-- <div>
|
||||
<el-button icon="Fullscreen" circle size="small" @click="toggleFullscreen" class="mr-2"
|
||||
:title="isFullscreen ? '退出全屏' : '全屏'" />
|
||||
<el-button icon="Close" circle size="small" @click="dialogVisible = false" title="关闭" />
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form ref="personFormRef" :model="personForm" :rules="addRules" label-width="100px" class="space-y-4">
|
||||
<!-- 基本信息区域 -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-lg font-semibold mb-4">基本信息</h3>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧列 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名" prop="name" required>
|
||||
<el-input v-model="personForm.name" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="联系方式" prop="phone" required>
|
||||
<el-input v-model="personForm.phone" placeholder="请输入联系方式" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="所属单位" prop="unit">
|
||||
<el-input v-model="personForm.unit" placeholder="请输入所属单位" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="工作地点" prop="workplace">
|
||||
<el-input v-model="personForm.workplace" placeholder="请输入工作地点" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧列 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="性别" prop="gender" required>
|
||||
<el-radio-group v-model="personForm.gender">
|
||||
<el-radio label="男">男</el-radio>
|
||||
<el-radio label="女">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="身份证号" prop="idCard" required>
|
||||
<el-input v-model="personForm.idCard" placeholder="请输入身份证号" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="实际签约单位" prop="signUnit">
|
||||
<el-input v-model="personForm.signUnit" placeholder="请输入实际签约单位" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="服务内容" prop="serviceContent">
|
||||
<el-input v-model="personForm.serviceContent" placeholder="请输入服务内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 个人头像 -->
|
||||
<el-form-item label="个人头像">
|
||||
<div class="flex items-start">
|
||||
<el-upload class="avatar-uploader" action="/upload" :show-file-list="false"
|
||||
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
||||
<img v-if="personForm.avatarUrl" :src="personForm.avatarUrl" class="avatar" />
|
||||
<el-icon v-else class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
<div class="ml-4 text-sm text-gray-500">
|
||||
<p>提示：</p>
|
||||
<p>请上传规格大于184*209像素且小于2M的照片；</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 备注 -->
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="personForm.remark" type="textarea" :rows="4" placeholder="请输入备注信息" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 文件上传区域 -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-4">上传签订保密承诺书和安全承诺书</h3>
|
||||
|
||||
<el-form-item label="附件" prop="attachments" required>
|
||||
<el-upload class="upload-demo" action="/upload" :on-success="handleFileSuccess"
|
||||
:file-list="personForm.attachments" :multiple="true" :before-upload="beforeFileUpload" accept=".pdf">
|
||||
<el-button type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
<div class="text-sm text-gray-500 mt-2">
|
||||
<p>提示：请上传签订《保密承诺书》和《安全承诺书》</p>
|
||||
<p v-if="personForm.attachments.length > 0" class="mt-1">
|
||||
<el-link type="primary" v-for="(file, index) in personForm.attachments" :key="index">
|
||||
{{ file.name }}
|
||||
</el-link>
|
||||
</p>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Header from "@/components/header/index.vue"
|
||||
import BottomBtn from "@/components/BottomBtn/index.vue"
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
defineOptions({ name: 'AcrossForm' })
|
||||
|
||||
|
||||
const formData = reactive({
|
||||
applicationDesc: '', // 申请说明
|
||||
applicationNo: '', // 申请单号
|
||||
demandUnit: '创新院', // 需求单位，默认值为创新院
|
||||
cooperationUnit: '软件通力', // 外协单位，默认值为软件通力
|
||||
applicationTime: '', // 申请时间
|
||||
personCount: null, // 人数
|
||||
remarks: '' // 备注
|
||||
});
|
||||
// 控制弹窗显示
|
||||
const dialogVisible = ref(false);
|
||||
// 控制全屏状态
|
||||
const isFullscreen = ref(false);
|
||||
// 表单引用
|
||||
const personFormRef = ref(null);
|
||||
|
||||
// 表单引用
|
||||
const formRef = ref(null);
|
||||
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
applicationDesc: [
|
||||
{ required: true, message: '请输入申请说明', trigger: 'blur' }
|
||||
],
|
||||
applicationNo: [
|
||||
{ required: true, message: '请输入申请单号', trigger: 'blur' }
|
||||
],
|
||||
demandUnit: [
|
||||
{ required: true, message: '请选择需求单位', trigger: 'change' }
|
||||
],
|
||||
cooperationUnit: [
|
||||
{ required: true, message: '请选择外协单位', trigger: 'change' }
|
||||
],
|
||||
applicationTime: [
|
||||
{ required: true, message: '请选择申请时间', trigger: 'change' }
|
||||
],
|
||||
personCount: [
|
||||
{ required: true, message: '请输入人数', trigger: 'blur' },
|
||||
{ type: 'number', min: 1, message: '人数不能小于1', trigger: 'blur' }
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
name: '张三',
|
||||
idCard: '232434',
|
||||
gender: '男'
|
||||
},
|
||||
// 可以添加更多数据
|
||||
// {
|
||||
// name: '李四',
|
||||
// idCard: '345678',
|
||||
// gender: '女'
|
||||
// }
|
||||
]);
|
||||
|
||||
const personForm = reactive({
|
||||
name: '周淑慧',
|
||||
gender: '女',
|
||||
phone: '18900000000',
|
||||
idCard: '420683199912090952',
|
||||
unit: '北京健力源餐饮管理有限公司',
|
||||
signUnit: '北京健力源餐饮管理有限公司',
|
||||
workplace: '丰台创新中心-C区-2楼',
|
||||
serviceContent: '餐厅经理',
|
||||
avatarUrl: 'https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/f2704410ac4b4772ad2cbab277cb459d.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1756966868&x-signature=MFSxDvQMJLXjElg0nRUuSYFosHM%3D',
|
||||
remark: '',
|
||||
attachments: [
|
||||
{ name: '《保密承诺书》.pdf', url: '#' },
|
||||
{ name: '《安全承诺书》.pdf', url: '#' }
|
||||
]
|
||||
});
|
||||
// 表单验证规则
|
||||
const addRules = reactive({
|
||||
name: [
|
||||
{ required: true, message: '请输入姓名', trigger: 'blur' }
|
||||
],
|
||||
gender: [
|
||||
{ required: true, message: '请选择性别', trigger: 'change' }
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '请输入联系方式', trigger: 'blur' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||||
],
|
||||
idCard: [
|
||||
{ required: true, message: '请输入身份证号', trigger: 'blur' },
|
||||
{ pattern: /(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
|
||||
],
|
||||
attachments: [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传相关文件',
|
||||
trigger: 'change',
|
||||
validator: (rule, value, callback) => {
|
||||
if (value.length < 2) {
|
||||
callback(new Error('请上传《保密承诺书》和《安全承诺书》两个文件'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 新增
|
||||
const addInfo = () => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 切换全屏状态
|
||||
const toggleFullscreen = () => {
|
||||
isFullscreen.value = !isFullscreen.value;
|
||||
// 触发重绘
|
||||
dialogVisible.value = false;
|
||||
setTimeout(() => {
|
||||
dialogVisible.value = true;
|
||||
}, 50);
|
||||
};
|
||||
|
||||
// 处理头像上传成功
|
||||
const handleAvatarSuccess = (response, uploadFile) => {
|
||||
personForm.avatarUrl = URL.createObjectURL(uploadFile.raw);
|
||||
};
|
||||
|
||||
// 头像上传前验证
|
||||
const beforeAvatarUpload = (rawFile) => {
|
||||
const isLt2M = rawFile.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
ElMessage.error('头像图片大小不能超过 2MB!');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 这里可以添加尺寸验证逻辑
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const { width, height } = img;
|
||||
if (width >= 184 && height >= 209) {
|
||||
resolve(true);
|
||||
} else {
|
||||
ElMessage.error('头像图片尺寸不能小于 184x209 像素!');
|
||||
reject(new Error('尺寸不符合要求'));
|
||||
}
|
||||
};
|
||||
img.src = URL.createObjectURL(rawFile);
|
||||
});
|
||||
};
|
||||
|
||||
// 处理文件上传成功
|
||||
const handleFileSuccess = (response, uploadFile) => {
|
||||
personForm.attachments.push({
|
||||
name: uploadFile.name,
|
||||
url: '#'
|
||||
});
|
||||
};
|
||||
|
||||
// 文件上传前验证
|
||||
const beforeFileUpload = (rawFile) => {
|
||||
const isPDF = rawFile.type === 'application/pdf';
|
||||
const isLt2M = rawFile.size / 1024 / 1024 < 2;
|
||||
|
||||
if (!isPDF) {
|
||||
ElMessage.error('只能上传 PDF 文件!');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!isLt2M) {
|
||||
ElMessage.error('文件大小不能超过 2MB!');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
// 删除
|
||||
const handleDelete = (index,row) => {
|
||||
console.log(row,'row-----')
|
||||
tableData.value.splice(index, 1)
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = () => {
|
||||
personFormRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
// 表单验证通过，处理提交逻辑
|
||||
console.log('表单数据:', personForm);
|
||||
const {name,idCard,gender} = personForm
|
||||
tableData.value.push({name,idCard,gender})
|
||||
ElMessage.success('提交成功');
|
||||
dialogVisible.value = false;
|
||||
} else {
|
||||
// 表单验证失败
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
const handleClose = () => {
|
||||
// 重置表单
|
||||
personFormRef.value.resetFields();
|
||||
// 退出全屏
|
||||
if (isFullscreen.value) {
|
||||
isFullscreen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.person_info {
|
||||
padding: 10px;
|
||||
|
||||
.info_btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.person-info-dialog {
|
||||
::v-deep .el-dialog__body {
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog--fullscreen {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-uploader .avatar {
|
||||
width: 120px;
|
||||
height: 160px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
width: 120px;
|
||||
height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.space-y-4 {
|
||||
padding: 10px;
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
275
src/views/lowexample/form/OrderForm.vue
Normal file
275
src/views/lowexample/form/OrderForm.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<!-- 订单详情类型表单与表单设计 -->
|
||||
<div class="step-orde-form-box">
|
||||
<div class="order-top">
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="orderTopData.defaultData"
|
||||
:showButton="false"
|
||||
:formId="orderTopData.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
<div class="steps">
|
||||
<el-steps :active="active" align-center>
|
||||
<template v-for="(item, index) in stepList" :key="index">
|
||||
<el-step :title="item.title" :description="item.description" />
|
||||
</template>
|
||||
</el-steps>
|
||||
</div>
|
||||
<template v-for="item in cardList" :key="item.formId">
|
||||
<div class="card flex justify-center mt-20px">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>订单详情</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.type == 'exploit'">
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="ddxxData"
|
||||
:showButton="false"
|
||||
:formId="item.formId"
|
||||
></FormView>
|
||||
</template>
|
||||
|
||||
<template v-if="item.type == 'design'">
|
||||
<LowTable :tableId="item.formId" :enhanceData="item.enhanceData"> </LowTable>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||||
|
||||
defineOptions({ name: 'OrderForm' })
|
||||
|
||||
const orderTopData = ref({
|
||||
type: 'exploit',
|
||||
refKey: 'orderTop',
|
||||
formId: '1834469087501627393',
|
||||
defaultData: {
|
||||
btn_group: '',
|
||||
mode_distribution: '2',
|
||||
mode_payment: '1',
|
||||
order_bh: '2024091335',
|
||||
order_money: '2503',
|
||||
order_source: '1',
|
||||
order_status: '2',
|
||||
order_type: '2',
|
||||
payment_date: '2024-09-12 19:04:00',
|
||||
update_date: '2024-09-12 04:42:00'
|
||||
}
|
||||
})
|
||||
|
||||
const active = ref(2)
|
||||
const stepList = ref([
|
||||
{
|
||||
title: '提交订单',
|
||||
description: '2024-9-18 10:00'
|
||||
},
|
||||
{
|
||||
title: '支付订单',
|
||||
description: '2024-9-18 10:00'
|
||||
},
|
||||
{
|
||||
title: '平台发货',
|
||||
description: '2024-9-18 10:00'
|
||||
},
|
||||
{
|
||||
title: '确认收货'
|
||||
},
|
||||
{
|
||||
title: '完成评价'
|
||||
}
|
||||
])
|
||||
|
||||
const ddxxData = ref({
|
||||
ddly: orderTopData.value.defaultData.order_source,
|
||||
ddlx: orderTopData.value.defaultData.order_type,
|
||||
tjsj: orderTopData.value.defaultData.update_date,
|
||||
zffs: orderTopData.value.defaultData.mode_payment,
|
||||
psfs: orderTopData.value.defaultData.mode_distribution,
|
||||
zfsj: '2024-09-12 02:42:00',
|
||||
wldh: '未发货',
|
||||
zdqrshsj: '2024-09-16 04:42:00',
|
||||
jfhk: '2000',
|
||||
czhk: '2000',
|
||||
yhzh: '1833323260582391810',
|
||||
hdxx: '无',
|
||||
sphjje: orderTopData.value.defaultData.order_money,
|
||||
yf: '',
|
||||
yhj: '',
|
||||
jfzk: '',
|
||||
hdyh: '',
|
||||
zkje: '',
|
||||
ddje: orderTopData.value.defaultData.order_money,
|
||||
yfkje: orderTopData.value.defaultData.order_money,
|
||||
shr: '1833323260582391810',
|
||||
sjhm: '188888888888',
|
||||
yzbm: '18300',
|
||||
shdz: '广东省深圳市南山区科兴科学园',
|
||||
fplx: '1',
|
||||
fptt: '1',
|
||||
qymc: '广东科技有限公司',
|
||||
qysh: '91440300MA5FQY***',
|
||||
qydz: '广东省深圳市南山区科兴科学园',
|
||||
fpnr: '商品名细',
|
||||
sprsj: '13566624',
|
||||
spryx: '33625@qq.com'
|
||||
})
|
||||
|
||||
const cardList = ref([
|
||||
{
|
||||
title: '订单详情',
|
||||
type: 'exploit',
|
||||
formId: '1836249142368169986',
|
||||
defaultData: ddxxData.value
|
||||
},
|
||||
{
|
||||
title: '商品信息',
|
||||
type: 'design',
|
||||
formId: '1836298963389067265',
|
||||
enhanceData: {
|
||||
hideHeader: 'disabled'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作记录',
|
||||
type: 'design',
|
||||
formId: '1836318516001189890',
|
||||
enhanceData: {
|
||||
hideHeader: 'disabled'
|
||||
}
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.step-orde-form-box {
|
||||
.order-top {
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
}
|
||||
|
||||
.steps {
|
||||
width: calc(90% + 40px);
|
||||
padding: 30px 0;
|
||||
margin: 0 auto 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 10px;
|
||||
|
||||
::v-deep(.el-steps) {
|
||||
.el-step {
|
||||
.el-step__head.is-process {
|
||||
color: #409eff;
|
||||
|
||||
.el-step__icon.is-text {
|
||||
color: white;
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__head {
|
||||
.el-step__line {
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.el-step__icon.is-text {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
.el-step__icon-inner {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__main {
|
||||
.el-step__title {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.el-step__description {
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .card > .el-card {
|
||||
width: calc(90% + 40px);
|
||||
border-radius: 10px;
|
||||
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
|
||||
// &>::v-deep(.crud){
|
||||
// width: calc(90% + 40px);
|
||||
// }
|
||||
|
||||
::v-deep(.el-card) {
|
||||
// width: calc(90% + 40px);
|
||||
|
||||
.el-card__header {
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.card-header {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
.avue-crud {
|
||||
.el-card {
|
||||
margin: 0 auto;
|
||||
border-radius: 0;
|
||||
|
||||
.el-table__header {
|
||||
height: 55px;
|
||||
|
||||
th {
|
||||
height: 55px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body {
|
||||
.el-table__row {
|
||||
.el-table__cell {
|
||||
font-size: 13px;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
306
src/views/lowexample/form/OrderFormView.vue
Normal file
306
src/views/lowexample/form/OrderFormView.vue
Normal file
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<!-- 订单详情类型表单与表单设计 -->
|
||||
<div class="step-orde-form-box">
|
||||
<div class="order-top">
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="orderTopData.defaultData"
|
||||
:showButton="false"
|
||||
:formId="orderTopData.id"
|
||||
></FormView>
|
||||
</div>
|
||||
<div class="steps">
|
||||
<el-steps :active="active" align-center>
|
||||
<template v-for="(item, index) in stepList" :key="index">
|
||||
<el-step :title="item.title" :description="item.description" />
|
||||
</template>
|
||||
</el-steps>
|
||||
</div>
|
||||
<template v-for="item in cardList" :key="item.id">
|
||||
<div class="card flex justify-center mt-20px">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.type == 'exploit'">
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="ddxxData"
|
||||
:showButton="false"
|
||||
:formId="item.id"
|
||||
></FormView>
|
||||
</template>
|
||||
|
||||
<template v-if="item.type == 'design'">
|
||||
<LowTable :tableId="item.id" :enhanceData="item.enhanceData"> </LowTable>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||||
|
||||
defineOptions({ name: 'OrderForm' })
|
||||
|
||||
const orderTopData = ref({
|
||||
type: 'exploit',
|
||||
refKey: 'orderTop',
|
||||
id: '1844550190467956737',
|
||||
defaultData: {
|
||||
btn_group: '',
|
||||
mode_distribution: '1',
|
||||
mode_payment: '2',
|
||||
order_bh: '202062976600',
|
||||
order_money: '20000.00',
|
||||
order_source: '2',
|
||||
order_status: '2',
|
||||
order_type: '1',
|
||||
payment_date: '2024-11-25 23:26:08',
|
||||
update_date: '2024-11-25 23:26:08'
|
||||
}
|
||||
})
|
||||
|
||||
const active = ref(2)
|
||||
const stepList = ref([
|
||||
{
|
||||
title: '提交订单',
|
||||
description: '2024-10-14 12:00'
|
||||
},
|
||||
{
|
||||
title: '支付订单',
|
||||
description: '2024-10-14 12:00'
|
||||
},
|
||||
{
|
||||
title: '平台发货',
|
||||
description: '2024-10-14 12:00'
|
||||
},
|
||||
{
|
||||
title: '确认收货',
|
||||
description: '-'
|
||||
},
|
||||
{
|
||||
title: '完成评价',
|
||||
description: '-'
|
||||
}
|
||||
])
|
||||
|
||||
const ddxxData = ref({
|
||||
ddly: orderTopData.value.defaultData.order_source,
|
||||
ddlx: orderTopData.value.defaultData.order_type,
|
||||
tjsj: orderTopData.value.defaultData.update_date,
|
||||
zffs: orderTopData.value.defaultData.mode_payment,
|
||||
psfs: orderTopData.value.defaultData.mode_distribution,
|
||||
zfsj: '2024-11-25 23:26:08',
|
||||
wldh: '未发货',
|
||||
zdqrshsj: '15天',
|
||||
jfhk: '20000',
|
||||
czhk: '20000',
|
||||
yhzh: 'Windir',
|
||||
hdxx: '无',
|
||||
sphjje: orderTopData.value.defaultData.order_money,
|
||||
yf: '0.00',
|
||||
yhj: '0.00',
|
||||
jfzk: '',
|
||||
hdyh: '',
|
||||
zkje: '',
|
||||
ddje: orderTopData.value.defaultData.order_money,
|
||||
yfkje: orderTopData.value.defaultData.order_money,
|
||||
shr: '1833323260582391810',
|
||||
sjhm: '188888888888',
|
||||
yzbm: '518000',
|
||||
shdz: '广东省深圳市南山区科兴科学园',
|
||||
fplx: '1',
|
||||
fptt: '1',
|
||||
qymc: '广东科技有限公司',
|
||||
qysh: '91440300MA5FQY***',
|
||||
qydz: '广东省深圳市南山区科兴科学园',
|
||||
fpnr: '商品名细',
|
||||
sprsj: '13566624',
|
||||
spryx: '33625@qq.com'
|
||||
})
|
||||
|
||||
const cardList = ref([
|
||||
{
|
||||
title: '订单详情',
|
||||
type: 'exploit',
|
||||
id: '1844555987675561985',
|
||||
defaultData: ddxxData.value
|
||||
},
|
||||
{
|
||||
title: '商品信息',
|
||||
type: 'design',
|
||||
id: '1836298963389067265',
|
||||
enhanceData: {
|
||||
hideHeader: 'disabled'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作记录',
|
||||
type: 'design',
|
||||
id: '1836318516001189890',
|
||||
enhanceData: {
|
||||
hideHeader: 'disabled'
|
||||
}
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.step-orde-form-box {
|
||||
.order-top {
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
}
|
||||
|
||||
.steps {
|
||||
width: calc(90% + 40px);
|
||||
padding: 40px 0;
|
||||
margin: 0 auto 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 10px;
|
||||
|
||||
::v-deep(.el-steps) {
|
||||
.el-step {
|
||||
.el-step__head.is-process {
|
||||
color: #409eff;
|
||||
|
||||
.el-step__icon.is-text {
|
||||
color: white;
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__head {
|
||||
&.is-finish {
|
||||
.el-step__line {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__line {
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.el-step__icon.is-text {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
.el-step__icon-inner {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__main {
|
||||
margin-top: 3px;
|
||||
|
||||
.el-step__title {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.el-step__description {
|
||||
margin-top: -3px;
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step:not(:last-child) {
|
||||
.el-step__head {
|
||||
&.is-process::before {
|
||||
position: absolute;
|
||||
top: calc(50%);
|
||||
left: calc(50% + 15px);
|
||||
z-index: 9;
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 1px;
|
||||
background-color: var(--el-color-primary);
|
||||
content: '';
|
||||
transform: translateY(50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .card > .el-card {
|
||||
width: calc(90% + 40px);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
|
||||
// &>::v-deep(.crud){
|
||||
// width: calc(90% + 40px);
|
||||
// }
|
||||
|
||||
::v-deep(.el-card) {
|
||||
// width: calc(90% + 40px);
|
||||
|
||||
.el-card__header {
|
||||
height: 60px;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.card-header {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 15px 6px;
|
||||
|
||||
.avue-crud {
|
||||
.el-card {
|
||||
margin: 0 auto;
|
||||
border-radius: 0;
|
||||
|
||||
.el-table__header {
|
||||
height: 55px;
|
||||
|
||||
th {
|
||||
height: 55px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body {
|
||||
.el-table__row {
|
||||
.el-table__cell {
|
||||
font-size: 14px;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
57
src/views/lowexample/form/TabsCardForm.vue
Normal file
57
src/views/lowexample/form/TabsCardForm.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<!-- tabs标签页风格表单开发示例 -->
|
||||
<el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
|
||||
<template v-for="item in tabsPaneList" :key="item.name">
|
||||
<el-tab-pane :label="item.label" :name="item.name">
|
||||
<LowTable
|
||||
:ref="(el) => (tableRef[item.name] = el)"
|
||||
:tableId="item.formId"
|
||||
:calcHeight="item.calcHeight || undefined"
|
||||
:enhanceData="item.enhanceData"
|
||||
></LowTable>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { LowTable } from '@/components/LowDesign/index'
|
||||
|
||||
defineOptions({ name: 'TabsCardForm' })
|
||||
|
||||
const activeName = ref('cjje')
|
||||
const tableRef = ref({})
|
||||
|
||||
const tabsPaneList = ref([
|
||||
{
|
||||
label: '成交金额',
|
||||
name: 'cjje',
|
||||
formId: '1834136609367400450',
|
||||
enhanceData: { hideHeader: 'disabled' }
|
||||
},
|
||||
{ label: '回款金额', name: 'hkje', formId: '1851509263837597697', calcHeight: 200 }
|
||||
])
|
||||
|
||||
const handleClick = (tab) => {
|
||||
const key = tab.props.name
|
||||
if (key == 'hkje' && tableRef.value[key]) tableRef.value[key].initTableLayout()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #6b778c;
|
||||
}
|
||||
|
||||
.demo-tabs {
|
||||
::v-deep(.el-tabs__nav-wrap) {
|
||||
.el-tabs__item {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/views/lowexample/form/TabsForm.vue
Normal file
66
src/views/lowexample/form/TabsForm.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<!-- 标签页类型表单与表单设计 -->
|
||||
<FormView
|
||||
:ref="(el) => (formViewRef[tabsFormData.refKey] = el)"
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="tabsFormData.defaultData"
|
||||
:showButton="false"
|
||||
:formId="tabsFormData.formId"
|
||||
></FormView>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormView } from '@/components/LowDesign/index'
|
||||
|
||||
defineOptions({ name: 'TabsForm' })
|
||||
|
||||
const tabsDataDefaultData = reactive({
|
||||
create_date: '2024-09-11 09:04:00',
|
||||
customer_rating: 4,
|
||||
customer_source: '7',
|
||||
customer_status: '3',
|
||||
fields_4858197: '',
|
||||
fields_5452530: '',
|
||||
head_contact: '1833323260582391810',
|
||||
system_number: '202010001',
|
||||
tab_1: {
|
||||
tabs_customer_name: '张三',
|
||||
tabs_customer_rating: 4,
|
||||
tabs_customer_source: '7',
|
||||
tabs_customer_status: '3',
|
||||
tabs_now_city: '130000',
|
||||
tabs_system_number: '202010001',
|
||||
tabs_type_of_industry: '3',
|
||||
tabs_update_date: '2024-09-25 00:00:00',
|
||||
tabs_vesting_officer: '1833323260582391810'
|
||||
},
|
||||
tab_2: {
|
||||
tabs_company_tax: 'xxxxxxxxxxxxxx',
|
||||
tabs_company_tel: '3666-756614',
|
||||
tabs_company_web: 'http://www.xx.com',
|
||||
tabs_current_title: '5',
|
||||
tabs_deposit_bank: '中国建设银行',
|
||||
tabs_detailed_address: '130000,130400,130406',
|
||||
tabs_head_contact: '1833323260582391810',
|
||||
tabs_invoice_title: '科技有限公司',
|
||||
tabs_phone_number: '15238683333'
|
||||
},
|
||||
tabs_title: '广州某科技有限公司',
|
||||
type_of_industry: '3',
|
||||
vesting_officer: '1833323260582391810'
|
||||
})
|
||||
|
||||
const tabsFormData = ref({
|
||||
refKey: 'tabs',
|
||||
title: '基本信息',
|
||||
type: 'exploit',
|
||||
formId: '1833427992183988225',
|
||||
defaultData: tabsDataDefaultData
|
||||
})
|
||||
|
||||
const formViewRef = ref({})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
900
src/views/lowexample/form/WorkOrderForm.vue
Normal file
900
src/views/lowexample/form/WorkOrderForm.vue
Normal file
@@ -0,0 +1,900 @@
|
||||
<template>
|
||||
<!-- 订单详情类型表单与表单设计 -->
|
||||
<div class="step-orde-form-box">
|
||||
<div class="order-top">
|
||||
<div style="display: flex">
|
||||
<div class="tb-box">
|
||||
<img src="/public/img/11.jpg" style="height: 30px" />
|
||||
</div>
|
||||
<div class="title-box">
|
||||
<p class="title">{{ obj.gdbt }}</p>
|
||||
<div class="text-box">
|
||||
<span>20208447578</span>
|
||||
<div class="text-box-left">
|
||||
<span
|
||||
class="dian"
|
||||
:class="{ bj2: obj.gdzt == '2', color1: obj.gdzt == '3', bj4: obj.gdzt == '4' }"
|
||||
></span>
|
||||
<span>{{obj.gdzt == '1'? '待处理': obj.gdzt == '2'? '已完结': obj.gdzt =='3'? '已退回': '已撤销'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FormView
|
||||
:ref="(el) => (formViewRef[orderTopData.refKey] = el)"
|
||||
formType="add"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="orderTopData.defaultData"
|
||||
:showButton="false"
|
||||
:formId="orderTopData.id"
|
||||
></FormView>
|
||||
</div>
|
||||
<div class="steps" v-if="type != 'ycx'">
|
||||
<el-steps :active="type == 'ywj' ? 1 : active" align-center>
|
||||
<template v-for="(item, index) in stepList" :key="index">
|
||||
<el-step :title="item.title" :description="item.description" :icon="Avatar">
|
||||
<template #title>
|
||||
<div
|
||||
class="bzts"
|
||||
:class="{
|
||||
acitive: index == 1,
|
||||
color1: index == 1 && type == 'yth',
|
||||
color2: index == 1 && type == 'ywj'
|
||||
}"
|
||||
>
|
||||
<span>{{ item.tooltip }}</span>
|
||||
<div
|
||||
class="box"
|
||||
:class="{
|
||||
border: index == 1,
|
||||
border1: index == 1 && type == 'yth',
|
||||
border2: index == 1 && type == 'ywj'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div style="line-height: 32px">{{ item.title }}</div>
|
||||
<div v-if="index != 1" class="bubble">{{ item.text }}</div>
|
||||
</template>
|
||||
</el-step>
|
||||
</template>
|
||||
</el-steps>
|
||||
</div>
|
||||
<template v-for="item in cardList" :key="item.id">
|
||||
<div class="card flex justify-center mt-20px">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.type == 'exploit'">
|
||||
<FormView
|
||||
formType="view"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:defaultData="ddxxData"
|
||||
:showButton="false"
|
||||
:formId="item.id"
|
||||
></FormView>
|
||||
</template>
|
||||
<template v-if="item.type == 'design'">
|
||||
<LowTable :tableId="item.id" :enhanceData="item.enhanceData"> </LowTable>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="pljl">
|
||||
<div class="pt-10px" style="display: flex; align-items: center; margin-bottom: 20px">
|
||||
<span class="span"></span><span>评论记录</span>
|
||||
</div>
|
||||
<alert :data="listData"></alert>
|
||||
<!-- <div class="list-box" v-for="(item, index) in listData" :key="index">
|
||||
<div class="list-box-top">
|
||||
<div class="list-box-top-left">
|
||||
<div class="img"
|
||||
><Icon icon="mingcute:user-3-fill" width="1024" height="1024" style="color: #fff"
|
||||
/></div>
|
||||
<p>
|
||||
<span style="font-size: 14px; color: #666">{{ item.name }}</span> {{ item.sj }}</p
|
||||
>
|
||||
</div>
|
||||
<div class="list-box-top-right">X</div>
|
||||
</div>
|
||||
<div class="list-box-bottom">{{ item.content }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-input v-model="input" style="width: 92.5%; height: 60px" placeholder="请输入评论内容" />
|
||||
<el-button type="primary" class="el-buttons">发布</el-button>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="pt-5px" style="display: flex; align-items: center; margin-bottom: 20px">
|
||||
<span class="span"></span><span>操作记录</span>
|
||||
</div>
|
||||
<div class="footer-list pt-20px">
|
||||
<el-steps :space="150" :active="czjlData.length" direction="vertical">
|
||||
<template v-for="(item, index) in czjlData" :key="index">
|
||||
<el-step :title="item.title" :description="item.description" last>
|
||||
<template #title>
|
||||
<div class="content flex h-100px">
|
||||
<div
|
||||
class="w-35px h-35px bg-#CCCCCC flex items-center justify-center mr-7px mt-10px ml-10px"
|
||||
style="border-radius: 50%"
|
||||
>
|
||||
<Icon icon="mingcute:user-3-fill" :size="28" class="c-white" />
|
||||
</div>
|
||||
<div class="text-12px mt-10px grid grid-rows-3">
|
||||
<div>
|
||||
<span class="c-#999">
|
||||
<span style="font-size: 14px; color: #666">{{ item.name }}</span>
|
||||
{{ item.text }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text c-#666">{{ item.content }}</span>
|
||||
</div>
|
||||
<div class="lzgd">
|
||||
<span class="c-#666">来自工单：</span
|
||||
><span style="color: #999 !important">{{ item.gd }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-12px ml-auto pr-40px mt-20px">
|
||||
<div class="flex items-center">
|
||||
<Icon icon="mingcute:time-line" :size="14" style="color: #999" />
|
||||
<span class="c-#999" style="margin-left: 5px">{{ item.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="content-top">
|
||||
<div class="list-box-top-left">
|
||||
<div class="img"
|
||||
><Icon icon="mingcute:user-3-fill" :size="28" style="color: #fff"
|
||||
/></div>
|
||||
<p>
|
||||
<span style="font-size: 14px; color: #666">{{ item.name }}</span>
|
||||
{{ item.text }}</p
|
||||
>
|
||||
</div>
|
||||
<div class="list-box-top-right">
|
||||
<Icon
|
||||
icon="mingcute:time-line"
|
||||
width="1024"
|
||||
height="1024"
|
||||
style="color: #999"
|
||||
/>
|
||||
<span style="margin-left: 5px">{{ item.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-bottom">
|
||||
<div>
|
||||
<p class="text">{{ item.content }}</p>
|
||||
</div>
|
||||
<div class="lzgd">
|
||||
<span>来自工单：</span
|
||||
><span style="color: #999 !important">{{ item.gd }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
</el-step>
|
||||
</template>
|
||||
</el-steps>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Avatar } from '@element-plus/icons-vue'
|
||||
import { FormView, LowTable } from '@/components/LowDesign/index'
|
||||
import alert from '@/views/lowTemplate/generalPage/workReport/components/alert.vue'
|
||||
|
||||
defineOptions({ name: 'OrderForm' })
|
||||
interface Props {
|
||||
type?: string //控件名称
|
||||
obj: {
|
||||
gdbt: string
|
||||
gdzt: string
|
||||
}
|
||||
}
|
||||
|
||||
const popupShow = defineModel({ default: false, type: Boolean })
|
||||
const props = defineProps<Props>()
|
||||
|
||||
|
||||
const listData = reactive([
|
||||
{
|
||||
id: 1,
|
||||
imgUrl:
|
||||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||||
name: '赵小刚',
|
||||
time: '2019-03-23 22:31',
|
||||
content: '这个客户是我们的重点客户，请相关同事尽快帮忙落实解决。'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imgUrl:
|
||||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||||
name: '赵小刚',
|
||||
time: '2019-03-23 22:31',
|
||||
content: '这个客户是我们的重点客户，请相关同事尽快帮忙落实解决。'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imgUrl:
|
||||
'https://oss.yckxt.com/chatgpt/upload/1/2024-11-06/1/f0ee8a3c7c9638a54940382568c9dpng_5.png',
|
||||
name: '赵小刚',
|
||||
time: '2019-03-23 22:31',
|
||||
content: '这个客户是我们的重点客户，请相关同事尽快帮忙落实解决。'
|
||||
}
|
||||
])
|
||||
|
||||
const orderTopData = ref({
|
||||
type: 'exploit',
|
||||
refKey: 'gdgl',
|
||||
id: '1844943768151142401',
|
||||
defaultData: {
|
||||
gdbh: '202062976600',
|
||||
gdbt: '处理客户反馈问题',
|
||||
gdzt: 1,
|
||||
lx: props.type
|
||||
}
|
||||
})
|
||||
|
||||
const active = ref(0)
|
||||
|
||||
const stepList = ref([
|
||||
{
|
||||
title: '小明',
|
||||
tooltip: '提交',
|
||||
description: '2020-11-25 23:26:08',
|
||||
text: '已等待12小时30分钟'
|
||||
},
|
||||
{
|
||||
title: '赵小刚',
|
||||
tooltip: `${props.type == 'yth' ? '退回' : '完结'}`,
|
||||
description: '待处理'
|
||||
}
|
||||
])
|
||||
|
||||
const czjlData = ref([
|
||||
{
|
||||
title: '',
|
||||
description: '08-23',
|
||||
text: '销售经理',
|
||||
name: '赵小刚',
|
||||
content: '完结工单，共耗时：1小时16分钟 原因备注：无',
|
||||
gd: '工单标题',
|
||||
time: '2020-12-23 22:31'
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
description: '08-23',
|
||||
text: '销售经理',
|
||||
name: '赵小刚',
|
||||
content: '完结工单，共耗时：1小时16分钟 原因备注：无',
|
||||
gd: '工单标题',
|
||||
time: '2020-12-23 22:31'
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
description: '08-23',
|
||||
text: '销售经理',
|
||||
name: '赵小刚',
|
||||
content: '完结工单，共耗时：1小时16分钟 原因备注：无',
|
||||
gd: '工单标题',
|
||||
time: '2020-12-23 22:31'
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
description: '08-23',
|
||||
text: '销售经理',
|
||||
name: '赵小刚',
|
||||
content: '完结工单，共耗时：1小时16分钟 原因备注：无',
|
||||
gd: '工单标题',
|
||||
time: '2020-12-23 22:31'
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
description: '08-23',
|
||||
text: '销售经理',
|
||||
name: '赵小刚',
|
||||
content: '完结工单，共耗时：1小时16分钟 原因备注：无',
|
||||
gd: '工单标题',
|
||||
time: '2020-12-23 22:31'
|
||||
}
|
||||
])
|
||||
|
||||
const ddxxData = ref({
|
||||
gdbh: '20208447578',
|
||||
glkh: 1,
|
||||
gldd: 1,
|
||||
gdzz: 1,
|
||||
jycd: 1,
|
||||
tjry: '李小明',
|
||||
tjbm: '销售部',
|
||||
clry: '赵小刚',
|
||||
clbm: '技术部',
|
||||
tjsj: '2020-11-25 23:26:08',
|
||||
csry: '无',
|
||||
gdms: '客户反馈产品使用中遇到问题，希望技术协助。'
|
||||
})
|
||||
|
||||
const cardList = ref([
|
||||
{
|
||||
title: '工单详情',
|
||||
type: 'exploit',
|
||||
id: '1845002998170267649',
|
||||
defaultData: ddxxData.value
|
||||
},
|
||||
{
|
||||
title: '附件记录',
|
||||
type: 'design',
|
||||
id: '1845012516400803842',
|
||||
enhanceData: {
|
||||
hideHeader: 'disabled'
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
const formViewRef = ref({})
|
||||
const formData = ref({})
|
||||
|
||||
const setNextForm = () => {
|
||||
const currStep = orderTopData.value
|
||||
if (currStep.id) {
|
||||
setTimeout(async () => {
|
||||
// const formRef = formViewRef.value[currStep.refKey].controlRef
|
||||
// const data = await formRef.handleSubmit(true)
|
||||
}, 600)
|
||||
|
||||
// formData.value[currStep.refKey] = data
|
||||
}
|
||||
}
|
||||
setNextForm()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.step-orde-form-box {
|
||||
.order-top {
|
||||
display: flex;
|
||||
height: 80px;
|
||||
padding: 20px 25px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.tb-box {
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background: #52c1f5;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
margin-left: 20px;
|
||||
|
||||
.title {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.text-box {
|
||||
display: flex;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
align-items: center;
|
||||
|
||||
.text-box-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.dian {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 5px;
|
||||
margin-left: 10px;
|
||||
background: #f90;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steps {
|
||||
width: calc(90% + 40px);
|
||||
height: 90px;
|
||||
padding: 60px 0 30px;
|
||||
margin: 0 auto 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgb(233 233 233 / 100%);
|
||||
border-radius: 10px;
|
||||
|
||||
::v-deep(.el-steps) {
|
||||
margin-top: 9px;
|
||||
|
||||
.el-step {
|
||||
.el-step__head.is-process {
|
||||
color: #409eff;
|
||||
|
||||
.el-step__icon.is-text {
|
||||
color: white;
|
||||
background-color: #409eff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.el-step__head {
|
||||
.el-step__line {
|
||||
top: 30px;
|
||||
height: 5px;
|
||||
margin-right: 40px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.el-step__icon.is-text {
|
||||
width: 25px;
|
||||
height: 30px;
|
||||
|
||||
.el-step__icon-inner {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__main {
|
||||
.el-step__title {
|
||||
// position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.el-step__description {
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .card > .el-card {
|
||||
width: calc(90% + 40px);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
|
||||
// &>::v-deep(.crud){
|
||||
// width: calc(90% + 40px);
|
||||
// }
|
||||
|
||||
::v-deep(.el-card) {
|
||||
// width: calc(90% + 40px);
|
||||
|
||||
.el-card__header {
|
||||
height: 60px;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.card-header {
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
.avue-crud {
|
||||
.el-card {
|
||||
margin: 0 auto;
|
||||
border-radius: 0;
|
||||
|
||||
.el-table__header {
|
||||
height: 55px;
|
||||
|
||||
th {
|
||||
height: 55px;
|
||||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #666;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body {
|
||||
.el-table__row {
|
||||
.el-table__cell {
|
||||
font-size: 14px;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .avue--detail .el-col,
|
||||
::v-deep .avue--detail .el-row {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
// ::v-deep .avue--detail .el-row {
|
||||
// border-top: 1px solid #fff !important;
|
||||
// border-left: 1px solid #fff !important;
|
||||
// }
|
||||
|
||||
.bzts {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
width: 64px;
|
||||
height: 26px;
|
||||
margin-top: -70px;
|
||||
margin-left: -3px;
|
||||
line-height: 26px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background: #409eff;
|
||||
inherits: 0;
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
left: 25px;
|
||||
z-index: 999999999999999999;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 8px solid #409eff;
|
||||
border-right: 10px solid transparent;
|
||||
border-left: 8px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -80px;
|
||||
padding: 2px 8px;
|
||||
font-family: '微软雅黑', sans-serif;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.acitive {
|
||||
background: #ccc !important;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-top: 8px solid #ccc !important;
|
||||
}
|
||||
|
||||
.pljl {
|
||||
// display: flex;
|
||||
margin: 30px 50px;
|
||||
|
||||
.span {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 19px;
|
||||
margin-right: 10px;
|
||||
background: #409eff;
|
||||
}
|
||||
|
||||
::v-deep(.el-alert) {
|
||||
.el-alert__description {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// .list-box {
|
||||
// width: 100%;
|
||||
// padding: 20px;
|
||||
// margin-bottom: 20px;
|
||||
// background: #fcfcfc;
|
||||
// border: 1px solid #e9e9e9;
|
||||
|
||||
// .list-box-top {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
|
||||
// .list-box-top-left {
|
||||
// display: flex;
|
||||
// font-family: '微软雅黑', sans-serif;
|
||||
// font-size: 12px;
|
||||
// font-weight: 400;
|
||||
// color: #999;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
|
||||
// .img {
|
||||
// display: flex;
|
||||
// width: 28px;
|
||||
// height: 28px;
|
||||
// margin-right: 10px;
|
||||
// background: #ccc;
|
||||
// border-radius: 50%;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .list-box-bottom {
|
||||
// font-family: MicrosoftYaHei, '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
// font-style: normal;
|
||||
// font-weight: 400;
|
||||
// line-height: 22px;
|
||||
// color: #999;
|
||||
// text-align: left;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin: 30px 50px;
|
||||
margin-bottom: 0;
|
||||
|
||||
.span {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 19px;
|
||||
margin-right: 10px;
|
||||
background: #409eff;
|
||||
}
|
||||
|
||||
.footer-list {
|
||||
width: 100%;
|
||||
// height: 200px;
|
||||
// padding: 20px;
|
||||
|
||||
::v-deep(.el-steps) {
|
||||
.el-step.is-vertical {
|
||||
.el-step__head {
|
||||
&::after {
|
||||
top: 20px !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
|
||||
.el-step__line {
|
||||
top: -10px;
|
||||
bottom: -10px;
|
||||
width: 1px;
|
||||
margin-top: 25px;
|
||||
background-color: #f2f2f2;
|
||||
|
||||
.el-step__line-inner {
|
||||
border-color: #f2f2f2;
|
||||
border-width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__icon {
|
||||
width: 10px !important;
|
||||
height: 10px;
|
||||
margin-top: 9px;
|
||||
margin-left: 7px;
|
||||
overflow: hidden;
|
||||
|
||||
.el-step__icon-inner {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__main {
|
||||
.el-step__description.is-finish {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step:last-child {
|
||||
.el-step__head::after {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 11px;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 10%;
|
||||
height: 110px;
|
||||
background-color: #f2f2f2;
|
||||
border-color: red;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 53px;
|
||||
width: 95.5%;
|
||||
// padding: 10px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 9.8%);
|
||||
|
||||
// .content-top {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// width: 100%;
|
||||
|
||||
// .list-box-top-left {
|
||||
// display: flex;
|
||||
// font-family: '微软雅黑', sans-serif;
|
||||
// font-size: 12px;
|
||||
// font-weight: 400;
|
||||
// color: #999;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
|
||||
// .img {
|
||||
// display: flex;
|
||||
// width: 35px;
|
||||
// height: 35px;
|
||||
// margin-right: 10px;
|
||||
// background: #ccc;
|
||||
// border-radius: 50%;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .list-box-top-right {
|
||||
// display: flex;
|
||||
// font-family: '微软雅黑', sans-serif;
|
||||
// font-size: 12px;
|
||||
// font-weight: 400;
|
||||
// line-height: 20px;
|
||||
// color: #999;
|
||||
// align-items: center;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .content-bottom {
|
||||
// margin-top: -10px;
|
||||
// margin-left: 40px;
|
||||
// font-size: 12px;
|
||||
|
||||
// p {
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
// }
|
||||
|
||||
// .text {
|
||||
// font-family: MicrosoftYaHei, '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
// font-size: 12px;
|
||||
// font-style: normal;
|
||||
// font-weight: 400;
|
||||
// line-height: 20px;
|
||||
// color: #666;
|
||||
// text-align: left;
|
||||
// }
|
||||
|
||||
// .lzgd {
|
||||
// font-family: '微软雅黑', sans-serif;
|
||||
// font-size: 12px;
|
||||
// font-style: normal;
|
||||
// font-weight: 400;
|
||||
// color: #666;
|
||||
// text-align: left;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-steps) {
|
||||
.el-step__head {
|
||||
.el-step__line {
|
||||
background-color: var(--el-color-info-light-7);
|
||||
}
|
||||
|
||||
.el-step__icon {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
&.is-finish {
|
||||
.el-step__line {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step:not(:last-child) {
|
||||
.el-step__head {
|
||||
&.is-process::before {
|
||||
position: absolute;
|
||||
top: calc(50% + 11px);
|
||||
right: -40px;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 5px;
|
||||
background-color: var(--el-color-primary);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-textarea__inner {
|
||||
padding: 10px !important;
|
||||
color: #7e667e !important;
|
||||
background: #fcfcfc !important;
|
||||
}
|
||||
|
||||
::v-deep .el-input__wrapper {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-buttons {
|
||||
height: 60px;
|
||||
padding: 20px 30px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.color1 {
|
||||
background: #f56c6c !important;
|
||||
}
|
||||
|
||||
.border1 {
|
||||
border-top: 8px solid #f56c6c !important;
|
||||
}
|
||||
|
||||
.color2 {
|
||||
background: #19be6b !important;
|
||||
}
|
||||
|
||||
.border2 {
|
||||
border-top: 8px solid #19be6b !important;
|
||||
}
|
||||
|
||||
.bj2 {
|
||||
background: #19be6b !important;
|
||||
}
|
||||
|
||||
.bj4 {
|
||||
background: #ccc !important;
|
||||
}
|
||||
</style>
|
||||
151
src/views/lowexample/form/step/StepHorizontalForm.vue
Normal file
151
src/views/lowexample/form/step/StepHorizontalForm.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<!-- 步骤类型表单(水平方向)与表单设计 -->
|
||||
<ContentWrap>
|
||||
<el-steps :active="active" align-center>
|
||||
<el-step v-for="(item, index) in stepList" :key="item.refKey">
|
||||
<template #icon>
|
||||
<div class="step-icon-box" :class="{ avtive: active == index }">
|
||||
<div v-if="active == index" class="mt--1px">{{ index + 1 }}</div>
|
||||
<div v-else class="mt-1px">
|
||||
<Icon :size="14" icon="ep:select" color="var(--el-color-primary)"></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="c-[var(--el-text-color-primary)]">{{ item.title }}</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div
|
||||
class="c-[var(--el-color-info-light-3)] text-12px"
|
||||
:class="{ 'des-hide': active != index }"
|
||||
>{{ item.des }}</div
|
||||
>
|
||||
</template>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
<template v-for="(item, index) in stepList" :key="item.refKey">
|
||||
<div v-if="item.formId" v-show="active == index">
|
||||
<FormView
|
||||
:ref="(el) => (formViewRef[item.refKey] = el)"
|
||||
formType="add"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:showButton="false"
|
||||
:formId="item.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
<div v-if="active == index && active < 3" class="mt-40px flex justify-center">
|
||||
<el-button v-if="active != 0" @click="active = active - 1">上一步</el-button>
|
||||
<el-button type="primary" v-if="active <= 2" @click="setNextForm">{{
|
||||
active == 2 ? '提交' : '下一步'
|
||||
}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormView } from '@/components/LowDesign/index'
|
||||
defineOptions({ name: 'StepHorizontalForm' })
|
||||
const active = ref(0)
|
||||
const stepList = ref([
|
||||
{
|
||||
refKey: 'basic_sp',
|
||||
title: '基本信息',
|
||||
des: '请填写公司基本信息',
|
||||
formId: '1829756210681274369'
|
||||
},
|
||||
{
|
||||
refKey: 'detail_sp',
|
||||
title: '详细信息',
|
||||
des: '请填写公司详细信息',
|
||||
formId: '1829756992465985538'
|
||||
},
|
||||
{
|
||||
refKey: 'financial_sp',
|
||||
title: '财务信息',
|
||||
des: '请填写公司财务信息',
|
||||
formId: '1829757052494864386'
|
||||
},
|
||||
{
|
||||
refKey: 'submit_sp',
|
||||
title: '提交成功',
|
||||
des: '公司信息提交成功'
|
||||
}
|
||||
])
|
||||
|
||||
const formViewRef = ref({})
|
||||
const formData = ref({})
|
||||
|
||||
const setNextForm = async () => {
|
||||
const currStep = stepList.value[active.value]
|
||||
if (currStep.formId) {
|
||||
const formRef = formViewRef.value[currStep.refKey].controlRef
|
||||
const data = await formRef.handleSubmit(true)
|
||||
formData.value[currStep.refKey] = data
|
||||
}
|
||||
active.value++
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.low-form) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.step-icon-box {
|
||||
display: flex;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #fff;
|
||||
border: 2px solid var(--el-color-primary);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.avtive {
|
||||
color: #fff;
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-steps) {
|
||||
.el-step__head {
|
||||
.el-step__line {
|
||||
background-color: var(--el-color-info-light-7);
|
||||
}
|
||||
|
||||
.el-step__icon {
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
&.is-finish {
|
||||
.el-step__line {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-step:not(:last-child) {
|
||||
.el-step__head {
|
||||
&.is-process::before {
|
||||
position: absolute;
|
||||
top: calc(50% - 1px);
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
background-color: var(--el-color-primary);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
200
src/views/lowexample/form/step/StepVerticalForm.vue
Normal file
200
src/views/lowexample/form/step/StepVerticalForm.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<!-- 步骤类型表单(垂直方向)与表单设计 -->
|
||||
<ContentWrap>
|
||||
<el-steps direction="vertical" :active="active">
|
||||
<el-step v-for="(item, index) in stepList" :key="item.refKey">
|
||||
<template #icon>
|
||||
<div class="step-icon-box" :class="{ avtive: active == index }">
|
||||
<div v-if="active == index" class="mt--1px">{{ index + 1 }}</div>
|
||||
<div v-else class="mt-1px">
|
||||
<Icon :size="14" icon="ep:select" color="var(--el-color-primary)"></Icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="c-[var(--el-text-color-primary)]">{{ item.title }}</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div
|
||||
class="c-[var(--el-color-info-light-3)] text-12px"
|
||||
:class="{ 'des-hide': active != index }"
|
||||
>{{ item.des }}</div
|
||||
>
|
||||
<div v-if="item.formId" v-show="active == index">
|
||||
<FormView
|
||||
:ref="(el) => (formViewRef[item.refKey] = el)"
|
||||
formType="add"
|
||||
handleType="returnData"
|
||||
showType="view"
|
||||
:showButton="false"
|
||||
:formId="item.formId"
|
||||
></FormView>
|
||||
</div>
|
||||
<div v-if="active == index && active < 3" class="ml-65px mb-20px">
|
||||
<el-button v-if="active != 0" @click="active = active - 1">上一步</el-button>
|
||||
<el-button type="primary" v-if="active <= 2" @click="setNextForm">{{
|
||||
active == 2 ? '提交' : '下一步'
|
||||
}}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormView } from '@/components/LowDesign/index'
|
||||
import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
|
||||
defineOptions({ name: 'StepEndlongForm' })
|
||||
|
||||
interface HandleClickProps {
|
||||
(formData: object): string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
addFun: HandleClickProps
|
||||
}>()
|
||||
|
||||
const active = ref(0)
|
||||
const stepList = ref([
|
||||
{
|
||||
refKey: 'basic',
|
||||
title: '基本信息',
|
||||
des: '请填写公司基本信息',
|
||||
formId: '1829756210681274369'
|
||||
},
|
||||
{
|
||||
refKey: 'detail',
|
||||
title: '详细信息',
|
||||
des: '请填写公司详细信息',
|
||||
formId: '1829756992465985538'
|
||||
},
|
||||
{
|
||||
refKey: 'financial',
|
||||
title: '财务信息',
|
||||
des: '请填写公司财务信息',
|
||||
formId: '1829757052494864386'
|
||||
},
|
||||
{
|
||||
refKey: 'submit',
|
||||
title: '提交成功',
|
||||
des: '公司信息提交成功'
|
||||
}
|
||||
])
|
||||
|
||||
const formViewRef = ref({})
|
||||
const formData = ref({})
|
||||
|
||||
const debounce = (func, wait) => {
|
||||
let timeout
|
||||
return function () {
|
||||
const args = arguments
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(() => func.apply(args), wait)
|
||||
}
|
||||
}
|
||||
|
||||
const setNextForm = debounce(async () => {
|
||||
const currStep = stepList.value[active.value]
|
||||
if (currStep.formId) {
|
||||
const formRef = formViewRef.value[currStep.refKey].controlRef
|
||||
const data = await formRef.handleSubmit(true)
|
||||
formData.value[currStep.refKey] = data
|
||||
|
||||
if (active.value == 2 && data) {
|
||||
interface primordialTableDataType {
|
||||
basic: {
|
||||
company_name: string
|
||||
client_state: string
|
||||
industry_type: string
|
||||
client_source: string
|
||||
client_level: string
|
||||
}
|
||||
}
|
||||
const userInfo = ref({} as ProfileVO)
|
||||
const users = await getUserProfile()
|
||||
userInfo.value = users
|
||||
let primordialTableData = {
|
||||
company_name: (formData.value as primordialTableDataType).basic.company_name,
|
||||
customer_status: (formData.value as primordialTableDataType).basic.client_state,
|
||||
industry_type: (formData.value as primordialTableDataType).basic.industry_type,
|
||||
customer_source: (formData.value as primordialTableDataType).basic.client_source,
|
||||
customer_star: (formData.value as primordialTableDataType).basic.client_level,
|
||||
add_people: userInfo.value.id,
|
||||
update_date: formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss'),
|
||||
bh: '20241001'
|
||||
}
|
||||
props.addFun(primordialTableData)
|
||||
}
|
||||
|
||||
active.value++
|
||||
}
|
||||
}, 500)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.low-form) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.step-icon-box {
|
||||
display: flex;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #fff;
|
||||
border: 2px solid var(--el-color-primary);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.avtive {
|
||||
color: #fff;
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-steps) {
|
||||
.el-step__head {
|
||||
width: 30px;
|
||||
|
||||
.el-step__line {
|
||||
left: 14px;
|
||||
background-color: var(--el-color-info-light-7);
|
||||
}
|
||||
|
||||
.el-step__icon {
|
||||
width: 30px !important;
|
||||
}
|
||||
|
||||
&.is-finish {
|
||||
.el-step__line {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-process::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 14px;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 50%;
|
||||
background-color: var(--el-color-primary);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.des-hide {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
src/views/lowexample/form/workOrder.vue
Normal file
123
src/views/lowexample/form/workOrder.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<!-- tabs标签页风格表单开发示例 -->
|
||||
<div class="w-100%">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<el-radio-group v-model="radio" >
|
||||
<template v-for="item in tabsPaneList" :key="item.name">
|
||||
<el-radio-button :label="item.label" :value="item.name" />
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="padding: 20px 40px;">
|
||||
<template v-for="item in tabsPaneList" :key="item.name">
|
||||
<LowTable
|
||||
v-if="item.name == radio"
|
||||
:ref="(el) => (tableRef[item.name] = el)"
|
||||
:tableId="item.tableId"
|
||||
:calcHeight="item.calcHeight || undefined"
|
||||
:enhanceData="item.enhanceData"
|
||||
></LowTable>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
|
||||
<template v-for="item in tabsPaneList" :key="item.name">
|
||||
<el-tab-pane :label="item.label" :name="item.name">
|
||||
<LowTable
|
||||
:ref="(el) => (tableRef[item.name] = el)"
|
||||
:tableId="item.tableId"
|
||||
:calcHeight="item.calcHeight || undefined"
|
||||
:enhanceData="item.enhanceData"
|
||||
></LowTable>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { LowTable } from '@/components/LowDesign/index'
|
||||
|
||||
defineOptions({ name: 'TabsCardForm' })
|
||||
|
||||
const radio = ref('qbgd')
|
||||
const activeName = ref('qbgd')
|
||||
const tableRef = ref({})
|
||||
|
||||
const tabsPaneList = ref([
|
||||
{
|
||||
label: '全部工单',
|
||||
name: 'qbgd',
|
||||
tableId: '1844620967619866625',
|
||||
enhanceData: { hideHeader: 'disabled' }
|
||||
},
|
||||
{ label: '我发起的', name: 'wfqd', tableId: '1844620967619866625 ', calcHeight: 200 },
|
||||
{ label: '提交给我的', name: 'tjgwd', tableId: '1844620967619866625 ', calcHeight: 200 },
|
||||
{ label: '抄送给我的', name: 'csgwd', tableId: '1844620967619866625 ', calcHeight: 200 },
|
||||
])
|
||||
|
||||
const handleClick = (tab) => {
|
||||
const key = tab.props.name
|
||||
if (key == 'wfqd' && tableRef.value[key]){
|
||||
tableRef.value[key].initTableLayout()
|
||||
} else if (key == 'tjgwd' && tableRef.value[key]){
|
||||
tableRef.value[key].initTableLayout()
|
||||
} else if (key == 'csgwd' && tableRef.value[key]){
|
||||
tableRef.value[key].initTableLayout()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box{
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border: 1px solid rgb(233 233 233 / 100%) ;
|
||||
border-radius: 10px;
|
||||
|
||||
.box-header{
|
||||
display: flex;
|
||||
height: 60px;
|
||||
padding: 0 30px;
|
||||
background: #f9f9f9;
|
||||
align-items: center;
|
||||
|
||||
::v-deep .el-radio-button{
|
||||
// height: 35px;
|
||||
|
||||
.el-radio-button__inner{
|
||||
padding: 10px 15px;
|
||||
font-family: MicrosoftYaHei, '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.el-radio-button__original-radio:checked+.el-radio-button__inner{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .demo-tabs > .el-tabs__content {
|
||||
// padding: 32px;
|
||||
// font-size: 32px;
|
||||
// font-weight: 600;
|
||||
// color: #6b778c;
|
||||
// }
|
||||
|
||||
// .demo-tabs {
|
||||
// ::v-deep(.el-tabs__nav-wrap) {
|
||||
// .el-tabs__item {
|
||||
// height: 50px;
|
||||
// font-size: 16px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// ::v-deep .el-tabs__item.is-active {
|
||||
// color:#fff !important;
|
||||
// background-color: #409eff !important; /* 你想要的高亮颜色 */
|
||||
// }
|
||||
</style>
|
||||
Reference in New Issue
Block a user