Skip to content

P
psa-web
Commit 80aa88de authored by qyx's avatar qyx
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 45858b41 fc4b946b
Hide whitespace changes
Inline Side-by-side
Showing with 630 additions and 393 deletions
src/assets/styles/index.scss
View file @ 80aa88de
...@@ -123,6 +123,7 @@ aside { ...@@ -123,6 +123,7 @@ aside {
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
display: flex; display: flex;
flex-direction: column; /* 垂直排列 */ flex-direction: column; /* 垂直排列 */
padding: 20px; padding: 20px;
......
src/views/myTodoList/index.vue
View file @ 80aa88de
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="formSearch"> <div class="contentTab">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <el-tabs
<el-tab-pane label="日常报销" name="daily"></el-tab-pane> v-model="activeName"
<el-tab-pane label="项目费用" name="projectCost"></el-tab-pane> class="demo-tabs"
<el-tab-pane label="差旅报销" name="travel"></el-tab-pane> @tab-click="handleClick"
<el-tab-pane label="工时审批" name="workHours"></el-tab-pane> >
</el-tabs> <el-tab-pane label="日常报销" name="daily"></el-tab-pane>
<el-tab-pane label="项目费用" name="projectCost"></el-tab-pane>
<el-form :inline="true" :model="formQuery" class="demo-form-inline"> <el-tab-pane label="差旅报销" name="travel"></el-tab-pane>
<el-form-item label="项目名称"> <el-tab-pane label="工时审批" name="workHours"></el-tab-pane>
<el-input </el-tabs>
v-model="formQuery.user" </div>
placeholder="Approved by" <keep-alive>
clearable <component
style="width: 220px" :is="dialogComponents[activeName]"
/> :key="activeName"
</el-form-item> ></component>
<el-form-item label="申请人"> </keep-alive>
<el-select
v-model="formQuery.region"
placeholder="Activity zone"
clearable
style="width: 220px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker
v-model="formQuery.date"
type="date"
placeholder="Pick a date"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="el-button-primary" icon="search"
>搜索</el-button
>
<el-button type="defalut" class="el-button-defalut" icon="Refresh"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div class="contentTable">
<component
:is="dialogComponents[activeName]"
:key="activeName"
></component>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { daily, projectCost, travel, workHours } from '../tab/tabComponent.js' import { daily, projectCost, travel, workHours } from '../tab/tabComponent.js'
...@@ -63,10 +28,16 @@ const dialogComponents = ref({ ...@@ -63,10 +28,16 @@ const dialogComponents = ref({
travel: travel, travel: travel,
workHours: workHours workHours: workHours
}) })
const activeName = ref('daily') const activeName = ref('daily')
const formQuery = reactive({})
const handleClick = value => { const handleClick = value => {
console.log(activeName.value) console.log(activeName.value)
} }
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss">
.contentTab {
padding: 20px;
background: #ffffff;
}
</style>
src/views/project/add.vue
View file @ 80aa88de
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="formSearch"> <div class="content">
<div style="padding-left: 10px"> <div style="padding-left: 10px">
<span class="bold-text" style="border-bottom: 2px solid #0062FF;">项目立项</span> <span class="bold-text" style="border-bottom: 2px solid #0062ff"
</div> >项目立项</span
<div style="padding-top: 20px"> >
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto" > </div>
<el-row :gutter="150"> <div style="padding-top: 20px">
<el-col :span="10"> <el-form
<el-form-item label="项目名称" prop="projectName"> ref="formRef"
<el-input :model="form"
v-model="form.projectName" :rules="rules"
placeholder="请输入项目名称" label-width="auto"
size="large" >
style="width: 100%" <el-row :gutter="150">
/> <el-col :span="10">
</el-form-item> <el-form-item label="项目名称" prop="projectName">
<el-form-item label="项目类型" prop="projectType"> <el-input
<el-select v-model="form.projectName"
v-model="form.projectType" placeholder="请输入项目名称"
placeholder="请选择项目类型" size="large"
> style="width: 100%"
<el-option />
v-for="dict in project_type" </el-form-item>
:key="dict.value" <el-form-item label="项目类型" prop="projectType">
:label="dict.label" <el-select
:value="dict.value" v-model="form.projectType"
style="width: 100%" placeholder="请选择项目类型"
/> >
</el-select> <el-option
</el-form-item> v-for="dict in project_type"
<el-form-item label="预计开始时间" prop="startDate"> :key="dict.value"
<el-date-picker :label="dict.label"
v-model="form.startDate" :value="dict.value"
format="YYYY/MM/DD" style="width: 100%"
type="date" />
placeholder="选择日期" </el-select>
style="width: 100%" </el-form-item>
size="large" <el-form-item label="预计开始时间" prop="startDate">
> <el-date-picker
</el-date-picker> v-model="form.startDate"
</el-form-item> format="YYYY/MM/DD"
<el-form-item label="预计结束时间" prop="endDate"> type="date"
<el-date-picker placeholder="选择日期"
size="large" style="width: 100%"
format="YYYY/MM/DD" size="large"
v-model="form.endDate" >
type="date" </el-date-picker>
placeholder="选择日期" </el-form-item>
style="width: 100%" <el-form-item label="预计结束时间" prop="endDate">
> <el-date-picker
</el-date-picker> v-model="form.endDate"
</el-form-item> size="large"
<el-form-item label="项目经理" prop="projectManagerId"> format="YYYY/MM/DD"
<el-select type="date"
v-model="form.projectManagerId" placeholder="选择日期"
placeholder="请选择项目经理" style="width: 100%"
size="large" >
> </el-date-picker>
<el-option </el-form-item>
v-for="dict in managerOptions" <el-form-item
:key="dict.value" label="项目经理"
:label="dict.label" prop="projectManagerId"
:value="dict.value" >
style="width: 100%" <el-select
/> v-model="form.projectManagerId"
</el-select> placeholder="请选择项目经理"
</el-form-item> size="large"
<el-form-item label="项目成员" prop="projectMemberIds"> >
<el-select <el-option
v-model="form.projectMemberIds" v-for="dict in managerOptions"
placeholder="请选择项目成员" :key="dict.value"
size="large" :label="dict.label"
multiple :value="dict.value"
filterable style="width: 100%"
style="width: 400px;" />
> </el-select>
<el-option </el-form-item>
v-for="dict in membersOptions" <el-form-item
:key="dict.value" label="项目成员"
:label="dict.label" prop="projectMemberIds"
:value="dict.value" >
/> <el-select
</el-select> v-model="form.projectMemberIds"
</el-form-item> placeholder="请选择项目成员"
<el-form-item label="项目成本(元)" prop="projectCost"> size="large"
<el-input multiple
size="large" filterable
v-model="form.projectCost" style="width: 400px"
placeholder="请输入项目成本" >
style="width: 100%" <el-option
></el-input> v-for="dict in membersOptions"
</el-form-item> :key="dict.value"
<el-form-item label="项目描述" prop="projectDescribe"> :label="dict.label"
<el-input :value="dict.value"
size="large" />
type="textarea" </el-select>
v-model="form.projectDescribe" </el-form-item>
placeholder="请输入项目描述" <el-form-item
:autosize="{ minRows: 5, maxRows: 10 }" label="项目成本(元)"
style="width: 100%" prop="projectCost"
></el-input> >
</el-form-item> <el-input
<el-form-item label="项目状态" prop="projectStatus"> v-model="form.projectCost"
<el-select v-model="form.projectStatus" placeholder="请选择项目状态" size="large"> size="large"
<el-option placeholder="请输入项目成本"
v-for="dict in project_status" style="width: 100%"
:key="dict.value" ></el-input>
:label="dict.label" </el-form-item>
:value="dict.value"/> <el-form-item
</el-select> label="项目描述"
</el-form-item> prop="projectDescribe"
<el-form-item label="项目附件" > >
<el-upload <el-input
list-type="text" v-model="form.projectDescribe"
v-model:file-list="form.fileList" size="large"
action="https://jsonplaceholder.typicode.com/posts/" type="textarea"
:on-preview="handlePreview" placeholder="请输入项目描述"
:on-remove="handleRemove" :autosize="{ minRows: 5, maxRows: 10 }"
:before-remove="beforeRemove" style="width: 100%"
:file-list="form.fileList" ></el-input>
:on-exceed="handleExceed" </el-form-item>
:auto-upload="false" <el-form-item label="项目状态" prop="projectStatus">
:on-success="handleSuccess" <el-select
> v-model="form.projectStatus"
<el-button size="large" type="text">点击上传</el-button> placeholder="请选择项目状态"
</el-upload> size="large"
</el-form-item> >
</el-col> <el-option
<el-col :span="10"> v-for="dict in project_status"
<el-form-item label="项目回款笔数"> :key="dict.value"
<el-select :label="dict.label"
v-model="form.repaymentCount" :value="dict.value"
placeholder="请选择项目回款笔数" />
@change="updateRepaymentInputs" </el-select>
size="large" </el-form-item>
> <el-form-item label="项目附件">
<el-option <el-upload
v-for="num in 10" v-model:file-list="form.fileList"
:key="num" list-type="text"
:label="num" action="https://jsonplaceholder.typicode.com/posts/"
:value="num" :on-preview="handlePreview"
></el-option> :on-remove="handleRemove"
</el-select> :before-remove="beforeRemove"
</el-form-item> :file-list="form.fileList"
<el-form :model="form" label-width="80px"> :on-exceed="handleExceed"
<div v-for="(item, index) in form.repaymentDetails" :key="index"> :auto-upload="false"
<el-row> :on-success="handleSuccess"
<el-col :span="12"> >
<!-- 回款比例 --> <el-button size="large" type="text"
<el-form-item :label="'第 ' + (index + 1) + ' 笔'"> >点击上传</el-button
<el-input v-model="item.repaymentPercentage" placeholder="请输入回款比例" width="100%"> >
<template #suffix> </el-upload>
% </el-form-item>
</template> </el-col>
</el-input> <el-col :span="10">
</el-form-item> <el-form-item label="项目回款笔数">
</el-col> <el-select
<el-col :span="12"> v-model="form.repaymentCount"
<!-- 回款条件 --> placeholder="请选择项目回款笔数"
<el-form-item label="回款前置条件"> size="large"
<el-input @change="updateRepaymentInputs"
v-model="item.repaymentCondition" >
placeholder="请输入前置条件" <el-option
width="100%" v-for="num in 10"
></el-input> :key="num"
</el-form-item> :label="num"
</el-col> :value="num"
</el-row> ></el-option>
</el-select>
</el-form-item>
<el-form :model="form" label-width="80px">
<div
v-for="(
item, index
) in form.repaymentDetails"
:key="index"
>
<el-row>
<el-col :span="12">
<!-- 回款比例 -->
<el-form-item
:label="
'第 ' + (index + 1) + ' 笔'
"
>
<el-input
v-model="
item.repaymentPercentage
"
placeholder="请输入回款比例"
width="100%"
>
<template #suffix>
%
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<!-- 回款条件 -->
<el-form-item label="回款前置条件">
<el-input
v-model="
item.repaymentCondition
"
placeholder="请输入前置条件"
width="100%"
></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
</el-col>
</el-row>
<el-form-item style="padding-left: 75%">
<el-button size="large" class="btn-B" @click="reset"
>返 回</el-button
>
<el-button
size="large"
type="primary"
class="btn-A"
@click="saveDraft"
>保存草稿</el-button
>
<el-button
size="large"
type="primary"
class="btn-A"
@click="handleSubmit"
>提 交</el-button
>
</el-form-item>
</el-form>
</div>
</div> </div>
</el-form>
</el-col>
</el-row>
<el-form-item style="padding-left: 75%">
<el-button size="large" @click="reset" class="btn-B">返 回</el-button>
<el-button size="large" type="primary" @click="saveDraft" class="btn-A">保存草稿</el-button>
<el-button size="large" type="primary" @click="handleSubmit" class="btn-A">提 交</el-button>
</el-form-item>
</el-form>
</div>
</div> </div>
</div>
</template> </template>
<script setup name="add"> <script setup name="add">
import { listUser } from "../../api/system/user.js"; import { listUser } from '../../api/system/user.js'
import { addDraft,addProject } from "../../api/project/project.js"; import { addDraft, addProject } from '../../api/project/project.js'
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance()
const { project_status, project_type } = proxy.useDict('project_status', 'project_type'); const { project_status, project_type } = proxy.useDict(
'project_status',
'project_type'
)
const formRef = ref() const formRef = ref()
const headOptions = ref([]) const headOptions = ref([])
const managerOptions = ref([]) const managerOptions = ref([])
const membersOptions = ref([]) const membersOptions = ref([])
const form = reactive({ const form = reactive({
id: '', id: '',
projectName: '', projectName: '',
projectType: '', projectType: '',
startDate: '', startDate: '',
endDate: '', endDate: '',
departmentLeadId: '', departmentLeadId: '',
projectManagerId: '', projectManagerId: '',
projectMemberIds: [], projectMemberIds: [],
projectCost: '', projectCost: '',
projectDescribe: '', projectDescribe: '',
projectStatus: '', projectStatus: '',
fileList: [], fileList: [],
repaymentCount: null, repaymentCount: null,
repaymentDetails: [], repaymentDetails: [],
draft: '' draft: ''
}) })
const rules = ref({ const rules = ref({
projectName: [ projectName: [
{ required: true, message: '项目名称不能为空', trigger: 'blur' } { required: true, message: '项目名称不能为空', trigger: 'blur' }
], ],
projectType: [ projectType: [
{ required: true, message: '项目类型不能为空', trigger: 'blur' } { required: true, message: '项目类型不能为空', trigger: 'blur' }
], ],
startDate: [ startDate: [
{ required: true, message: '预计开始时间不能为空', trigger: 'blur' } { required: true, message: '预计开始时间不能为空', trigger: 'blur' }
], ],
endDate: [ endDate: [
{ required: true, message: '预计结束时间不能为空', trigger: 'blur' } { required: true, message: '预计结束时间不能为空', trigger: 'blur' }
], ],
departmentLeadId: [ departmentLeadId: [
{ required: true, message: '部门负责人不能为空', trigger: 'blur' } { required: true, message: '部门负责人不能为空', trigger: 'blur' }
], ],
projectManagerId: [ projectManagerId: [
{ required: true, message: '项目经理不能为空', trigger: 'blur' } { required: true, message: '项目经理不能为空', trigger: 'blur' }
], ],
projectCost: [ projectCost: [
{ required: true, message: '项目成本不能为空', trigger: 'blur' } { required: true, message: '项目成本不能为空', trigger: 'blur' }
], ],
projectStatus: [ projectStatus: [
{ required: true, message: '项目状态不能为空', trigger: 'blur' } { required: true, message: '项目状态不能为空', trigger: 'blur' }
] ]
}) })
const getUserList = () => { const getUserList = () => {
listUser().then(response => { listUser().then(response => {
headOptions.value = response.rows.map(item => { headOptions.value = response.rows.map(item => {
return { return {
value: item.userId, value: item.userId,
label: item.nickName label: item.nickName
} }
}) })
managerOptions.value = response.rows.map(item => { managerOptions.value = response.rows.map(item => {
return { return {
value: item.userId, value: item.userId,
label: item.nickName label: item.nickName
} }
})
membersOptions.value = response.rows.map(item => {
return {
value: item.userId,
label: item.nickName
}
})
}) })
membersOptions.value = response.rows.map(item => {
return {
value: item.userId,
label: item.nickName
}
})
})
} }
// 提交表单 // 提交表单
const handleSubmit = () => { const handleSubmit = () => {
proxy.$refs["formRef"].validate(valid => { proxy.$refs['formRef'].validate(valid => {
if (valid) { if (valid) {
form.draft = '1' form.draft = '1'
addProject(form).then(response => { addProject(form).then(response => {
if (response.code === 200){ if (response.code === 200) {
proxy.$modal.msgSuccess("新增成功"); proxy.$modal.msgSuccess('新增成功')
resetForm() resetForm()
proxy.$router.push({ path: '/project' }) proxy.$router.push({ path: '/project' })
}else { } else {
proxy.$modal.msgError(response.msg) proxy.$modal.msgError(response.msg)
}
})
} }
}); })
}
});
} }
// 新增草稿 // 新增草稿
const saveDraft = () => { const saveDraft = () => {
proxy.$refs["formRef"].validate(valid => { proxy.$refs['formRef'].validate(valid => {
if (valid) { if (valid) {
proxy.$confirm('确认提交吗？', '提示', { proxy
confirmButtonText: '确定', .$confirm('确认提交吗？', '提示', {
cancelButtonText: '取消', confirmButtonText: '确定',
type: 'warning' cancelButtonText: '取消',
}).then(() => { type: 'warning'
addDraft(form).then(response => { })
if (response.code === 200){ .then(() => {
proxy.$modal.msgSuccess("草稿保存成功"); addDraft(form).then(response => {
}else { if (response.code === 200) {
proxy.$modal.msgError(response.msg) proxy.$modal.msgSuccess('草稿保存成功')
} else {
proxy.$modal.msgError(response.msg)
}
})
})
.catch(() => {})
} }
}); })
}).catch(()=> {})
}
});
} }
// 重置表单 // 重置表单
const resetForm = () => { const resetForm = () => {
form.projectName = '' form.projectName = ''
form.projectType = '' form.projectType = ''
form.startDate = '' form.startDate = ''
form.endDate = '' form.endDate = ''
form.departmentLeadId = '' form.departmentLeadId = ''
form.projectManagerId = '' form.projectManagerId = ''
form.projectMemberIds = [] form.projectMemberIds = []
form.projectCost = '' form.projectCost = ''
form.projectDescribe = '' form.projectDescribe = ''
form.projectStatus = '' form.projectStatus = ''
form.fileList = [] form.fileList = []
form.repaymentCount = '' form.repaymentCount = ''
form.repaymentDetails = [] form.repaymentDetails = []
form.draft = '' form.draft = ''
} }
// 返回项目管理页面 // 返回项目管理页面
const reset = () => { const reset = () => {
// 返回项目 // 返回项目
proxy.$router.push({ path: '/project' }) proxy.$router.push({ path: '/project' })
resetForm() resetForm()
} }
const updateRepaymentInputs = () => { const updateRepaymentInputs = () => {
// 根据用户输入的回款笔数更新百分比输入框的数量 // 根据用户输入的回款笔数更新百分比输入框的数量
if (form.repaymentCount > 0) { if (form.repaymentCount > 0) {
form.repaymentDetails = Array.from({ length: form.repaymentCount }, () => ({ form.repaymentDetails = Array.from(
repaymentPercentage: null, // 回款百分比 { length: form.repaymentCount },
repaymentCondition: "" // 回款前置条件 () => ({
})); repaymentPercentage: null, // 回款百分比
} else { repaymentCondition: '' // 回款前置条件
form.repaymentDetails = []; })
} )
} else {
form.repaymentDetails = []
}
} }
// 删除附件相关事件 // 删除附件相关事件
const handleRemove = (file, fileList) => { const handleRemove = (file, fileList) => {
console.log(file, fileList) console.log(file, fileList)
} }
// 预览附件相关事件 // 预览附件相关事件
const handlePreview = (file) => { const handlePreview = file => {
console.log(file) console.log(file)
} }
// 上传附件数量限制 // 上传附件数量限制
const handleExceed = (files, fileList) => { const handleExceed = (files, fileList) => {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); this.$message.warning(
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
)
} }
// 上传附件删除相关事件 // 上传附件删除相关事件
const beforeRemove = (file, fileList) => { const beforeRemove = (file, fileList) => {
return this.$confirm(`确定移除 ${file.name}？`); return this.$confirm(`确定移除 ${file.name}？`)
} }
// 上传附件成功相关事件 // 上传附件成功相关事件
// 在组件挂载时执行 // 在组件挂载时执行
onMounted(() => { onMounted(() => {
getUserList() getUserList()
}); })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.contentA{ .contentA {
height: auto; height: auto;
padding: 20px; padding: 20px;
margin-bottom: 10px; margin-bottom: 10px;
background: #FFFFFF; background: #ffffff;
box-shadow: 0 2px 2px 0 #b3b3b380; box-shadow: 0 2px 2px 0 #b3b3b380;
border-radius: 2px; border-radius: 2px;
overflow: hidden; overflow: hidden;
} }
.bold-text { .bold-text {
width: 72px; width: 72px;
height: 15px; height: 15px;
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-weight: 900; font-weight: 900;
font-size: 18px; font-size: 18px;
color: #0D162A; color: #0d162a;
letter-spacing: 0; letter-spacing: 0;
line-height: 15px; line-height: 15px;
} }
</style> </style>
src/views/tab/daily.vue
View file @ 80aa88de
<script setup></script>
<template> <template>
<div>1</div> <div style="display: flex; flex-direction: column; flex: 1">
<div class="formSearch">
<el-form :inline="true" :model="formQuery" class="demo-form-inline">
<el-form-item label="项目名称">
<el-input
v-model="formQuery.user"
placeholder="Approved by"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item label="申请人">
<el-select
v-model="formQuery.region"
placeholder="Activity zone"
clearable
style="width: 220px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker
v-model="formQuery.date"
type="date"
placeholder="Pick a date"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="el-button-primary"
icon="search"
>搜索</el-button
>
<el-button
type="defalut"
class="el-button-defalut"
icon="Refresh"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div class="contentTable">1</div>
</div>
</template> </template>
<script setup>
const formQuery = reactive({})
</script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>
src/views/tab/projectCost.vue
View file @ 80aa88de
<script setup></script> <template>
<div style="display: flex; flex-direction: column; flex: 1">
<template><div>2</div></template> <div class="formSearch">
<el-form :inline="true" :model="formQuery" class="demo-form-inline">
<el-form-item label="项目名称">
<el-input
v-model="formQuery.user"
placeholder="Approved by"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item label="申请人">
<el-select
v-model="formQuery.region"
placeholder="Activity zone"
clearable
style="width: 220px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker
v-model="formQuery.date"
type="date"
placeholder="Pick a date"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="el-button-primary"
icon="search"
>搜索</el-button
>
<el-button
type="defalut"
class="el-button-defalut"
icon="Refresh"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div class="contentTable">2</div>
</div>
</template>
<script setup>
const formQuery = reactive({})
</script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>
src/views/tab/travel.vue
View file @ 80aa88de
<script setup></script> <template>
<div style="display: flex; flex-direction: column; flex: 1">
<template><div>3</div></template> <div class="formSearch">
<el-form :inline="true" :model="formQuery" class="demo-form-inline">
<el-form-item label="项目名称">
<el-input
v-model="formQuery.user"
placeholder="Approved by"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item label="申请人">
<el-select
v-model="formQuery.region"
placeholder="Activity zone"
clearable
style="width: 220px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker
v-model="formQuery.date"
type="date"
placeholder="Pick a date"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="el-button-primary"
icon="search"
>搜索</el-button
>
<el-button
type="defalut"
class="el-button-defalut"
icon="Refresh"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div class="contentTable">3</div>
</div>
</template>
<script setup>
const formQuery = reactive({})
</script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>
src/views/tab/workHours.vue
View file @ 80aa88de
<script setup></script> <template>
<div style="display: flex; flex-direction: column; flex: 1">
<template><div>4</div></template> <div class="formSearch">
<el-form :inline="true" :model="formQuery" class="demo-form-inline">
<el-form-item label="项目名称">
<el-input
v-model="formQuery.user"
placeholder="Approved by"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item label="申请人">
<el-select
v-model="formQuery.region"
placeholder="Activity zone"
clearable
style="width: 220px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker
v-model="formQuery.date"
type="date"
placeholder="Pick a date"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="el-button-primary"
icon="search"
>搜索</el-button
>
<el-button
type="defalut"
class="el-button-defalut"
icon="Refresh"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div class="contentTable">4</div>
</div>
</template>
<script setup>
const formQuery = reactive({})
</script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment