feat : 需求征集新增/编辑/详情页面初始化
This commit is contained in:
67
src/components/FileUpload.vue
Normal file
67
src/components/FileUpload.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<el-upload :file-list="_value"
|
||||
:action="uploadFileUrl"
|
||||
:headers="headers"
|
||||
:limit="maxSize"
|
||||
with-credentials
|
||||
:multiple="maxSize > 0"
|
||||
:data="uploadParams"
|
||||
:auto-upload="true"
|
||||
:before-upload="beforeUpload"
|
||||
:on-success="handleUploadSuccess"
|
||||
>
|
||||
<el-button color="#DED0B2">上传文件</el-button>
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {defineProps, computed, ref} from "vue";
|
||||
import {ElMessage} from "element-plus";
|
||||
import { getToken } from '@/utils/auth'
|
||||
const baseURL = import.meta.env.VITE_BASE_URL
|
||||
const uploadFileUrl = ref(baseURL + "/workflow/process/file")
|
||||
const headers = reactive({
|
||||
authorization: getToken()
|
||||
})
|
||||
const disabled = ref(false)
|
||||
const uploadParams = ref({})
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
maxSize: {
|
||||
type: Number,
|
||||
default: 5
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(["input","getFile"])
|
||||
const fileList = ref([])
|
||||
const _value = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val) {
|
||||
emit("input", val);
|
||||
}
|
||||
})
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
// if (props.maxSize > 0 && file.size / 1024 / 1024 > props.maxSize) {
|
||||
// ElMessage.warning(`每个文件最大不超过 ${props.maxSize}MB`)
|
||||
// } else {
|
||||
return true
|
||||
// }
|
||||
}
|
||||
const handleUploadSuccess = (res, file) => {
|
||||
if (res.code !== 1000) {
|
||||
ElMessage.error("上传失败")
|
||||
}
|
||||
let data = res.data
|
||||
fileList.value.push(data)
|
||||
emit("getFile", fileList.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
166
src/views/projectdemand/demandcollection/add.vue
Normal file
166
src/views/projectdemand/demandcollection/add.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<baseTitle title="需求征集信息录入"></baseTitle>
|
||||
<fvForm :schema="schame" @getInstance="getInstance" :rules="rules"></fvForm>
|
||||
<baseTitle title="征集说明"></baseTitle>
|
||||
<Tinymce image-url="/notice/file" file-url="/notice/file" v-model:value="instructions" height="300"/>
|
||||
<baseTitle title="申请文件"></baseTitle>
|
||||
<file-upload @getFile="getFile"/>
|
||||
<div class="oper-page-btn">
|
||||
<el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="handleBack">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import {useTagsView} from '@/stores/tagsview.js'
|
||||
import {useAuthStore} from '@/stores/userstore.js'
|
||||
import {ElLoading, ElNotification} from 'element-plus';
|
||||
import {getMenuList} from '@/api/system/menuman.js'
|
||||
import {getRoleDetail, operate, getTemRoleOption} from "@/api/role/role";
|
||||
import FileUpload from "../../../components/FileUpload.vue";
|
||||
|
||||
const tagsViewStore = useTagsView()
|
||||
const authStore = useAuthStore()
|
||||
const route = useRoute()
|
||||
const form = ref(null)
|
||||
const fileList = ref(null)
|
||||
const menuTree = ref(null)
|
||||
const loading = ref(false)
|
||||
const localData = reactive({
|
||||
affiliatedCompany: []
|
||||
})
|
||||
const instructions = ref()
|
||||
const schame = computed(() => {
|
||||
let arr = [
|
||||
{
|
||||
label: '名称',
|
||||
prop: 'roleName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入名称',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '所属公司',
|
||||
prop: 'subCompanyId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择所属公司',
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
data: localData.affiliatedCompany,
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
},
|
||||
on: {
|
||||
change: async (val) => {
|
||||
const {data} = await getDeptOpt({subCompanyId: val})
|
||||
localData.departmentIdOpt = data
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '征集类型',
|
||||
prop: 'subCompanyType',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择征集类型',
|
||||
clearable: true,
|
||||
filterable: true,
|
||||
checkStrictly: true,
|
||||
data: localData.affiliatedCompany,
|
||||
disabled: route.query.userType == 0 ? true : false
|
||||
},
|
||||
on: {
|
||||
change: async (val) => {
|
||||
const {data} = await getDeptOpt({subCompanyId: val})
|
||||
localData.departmentIdOpt = data
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '截止时间',
|
||||
prop: 'dateValue',
|
||||
component: 'el-date-picker',
|
||||
props: {
|
||||
placeholder: '请选择截止时间',
|
||||
clearable: true,
|
||||
type: 'datetime'
|
||||
}
|
||||
}
|
||||
]
|
||||
return !authStore.roles.includes('superAdmin') ? arr.slice(0, arr.length - 1) : arr
|
||||
})
|
||||
|
||||
const rules = reactive({
|
||||
roleName: [{required: true, message: '请输入', trigger: 'change'}],
|
||||
subCompanyId: [{required: true, message: '请输入', trigger: 'change'}]
|
||||
})
|
||||
|
||||
const getInstance = (e) => {
|
||||
form.value = e
|
||||
}
|
||||
const getFile=(val)=>{
|
||||
console.log('fileList', val)
|
||||
fileList.value=val
|
||||
}
|
||||
const init = async () => {
|
||||
form.value.setValues({state: '1', template: false})
|
||||
const res = await getTemRoleOption()
|
||||
localData.tempRoleOpt = res.data
|
||||
const {data} = await getMenuList()
|
||||
localData.menuData = data
|
||||
}
|
||||
|
||||
const getInfo = async () => {
|
||||
if (!route.query.id) return
|
||||
const {data} = await getRoleDetail(route.query.id)
|
||||
data.menuIds.forEach(key => {
|
||||
menuTree.value.setChecked(key, true, false)
|
||||
})
|
||||
form.value.setValues(data)
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// const loading = ElLoading.service({fullscreen: true})
|
||||
// const {isValidate} = await form.value.validate()
|
||||
// if (!isValidate) return Promise.reject()
|
||||
// const values = form.value.getValues()
|
||||
// values.menuIds = checkChange()
|
||||
// operate(values).then(res => {
|
||||
// ElNotification({
|
||||
// title: route.query.isAdd ? '新增' : '编辑',
|
||||
// message: res.msg,
|
||||
// type: res.code === 1000 ? 'success' : 'error'
|
||||
// })
|
||||
// loading.close()
|
||||
// res.code === 1000 ? tagsViewStore.delViewAndGoView('/system/role') : null
|
||||
// }).finally(() => {
|
||||
// loading.close()
|
||||
// })
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
history.back()
|
||||
}
|
||||
|
||||
watch(localData, (val) => {
|
||||
menuTree.value.filter(val.filterText)
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
await init()
|
||||
if (route.query.id) {
|
||||
await getInfo()
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
119
src/views/projectdemand/demandcollection/detail.vue
Normal file
119
src/views/projectdemand/demandcollection/detail.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class="detail-block">
|
||||
<div class="left-info">
|
||||
<baseTitle title="需求征集详情"></baseTitle>
|
||||
<div class="info">
|
||||
<div v-for="item in list">
|
||||
<span>{{ item.title }}：</span>
|
||||
<span>{{ item.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<baseTitle title="征集说明"></baseTitle>
|
||||
<el-card>
|
||||
{{ instructions }}
|
||||
</el-card>
|
||||
<baseTitle title="申请文件"></baseTitle>
|
||||
<fvTable ref="tableIns" style="max-height: 200px" :tableConfig="tableConfig" @headBtnClick="headBtnClick" :pagination="false"></fvTable>
|
||||
<baseTitle title="审核意见"></baseTitle>
|
||||
<el-input
|
||||
v-model="auditOpinion"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
placeholder="请输入审核意见"
|
||||
/>
|
||||
</div>
|
||||
<div class="approval-record">
|
||||
<baseTitle title="审批记录"></baseTitle>
|
||||
</div>
|
||||
<div class="oper-page-btn">
|
||||
<el-button @click="handleSubmit">驳回</el-button>
|
||||
<el-button color="#DED0B2" @click="handleBack">同意</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
|
||||
const list = ref([
|
||||
{
|
||||
title: '名称',
|
||||
text: '名名称称名名称名称名称名称'
|
||||
}, {
|
||||
title: '所属公司',
|
||||
text: '名称名称名称名称'
|
||||
}, {
|
||||
title: '征集类型',
|
||||
text: '名称名称名称名称'
|
||||
}, {
|
||||
title: '截止时间',
|
||||
text: '名称名称名称名称'
|
||||
},
|
||||
])
|
||||
const instructions = ref('ds')
|
||||
const auditOpinion = ref('')
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'roleName',
|
||||
label: '文件名',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'roleKey',
|
||||
label: '标签',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
width:'200px',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => {
|
||||
return (
|
||||
<div>
|
||||
<el-button type="primary" link onClick={() => handleDownload(row)}>下载
|
||||
</el-button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
],
|
||||
api: '/admin/role'
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-block {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.left-info {
|
||||
flex: 0.6;
|
||||
margin-right: 30px;
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> div {
|
||||
width: 350px;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 10px;
|
||||
|
||||
> span:first-child {
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.approval-record {
|
||||
flex: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -62,7 +62,7 @@ const tableConfig = reactive({
|
||||
label: '状态',
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'normal_disable'} value={row.state}/>)
|
||||
currentRender: ({row, index}) => (<Tag dictType={'demand_collection'} value={row.state}/>)
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
@@ -72,17 +72,19 @@ const tableConfig = reactive({
|
||||
currentRender: ({row, index}) => {
|
||||
return (
|
||||
<div>
|
||||
<el-button type={'primary'} link onClick={()=>{}}>详情</el-button>
|
||||
<el-button type={'primary'} link onClick={()=>{}}>上报</el-button>
|
||||
<el-button type="primary" link onClick={() => handleDetail(row)}>详情
|
||||
</el-button>
|
||||
<el-button type="primary" link onClick={() => handleEdit(row)}>编辑</el-button>
|
||||
<el-button type="primary" link onClick={() => handleReport(row)}>上报</el-button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
],
|
||||
api: '',
|
||||
api: '/admin/role',
|
||||
btns: [
|
||||
{name: '新增', key: 'add', auth: auths.add, type: 'primary'},
|
||||
{name: '导出', key: 'add', auth: auths.add, type: 'primary'},
|
||||
{name: '新增', key: 'add', auth: auths.add, color: '#DED0B2'},
|
||||
{name: '导出', key: 'add', auth: auths.add, type: ''},
|
||||
],
|
||||
params: {}
|
||||
})
|
||||
@@ -91,13 +93,40 @@ const search = (val) => {
|
||||
tableConfig.params = {...val}
|
||||
tableIns.value.refresh()
|
||||
}
|
||||
const handleAdd = () => {
|
||||
router.push({
|
||||
path: '/projectdemand/demandadd',
|
||||
query: {
|
||||
isAdd: 1
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleEdit = (row) => {
|
||||
router.push({
|
||||
path: '/projectdemand/demandedit',
|
||||
query: {
|
||||
id: row.roleId
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleDetail = (row) => {
|
||||
router.push({
|
||||
path: '/projectdemand/demanddetail',
|
||||
query: {
|
||||
id: row.roleId
|
||||
}
|
||||
})
|
||||
}
|
||||
const headBtnClick = (key) => {
|
||||
switch (key) {
|
||||
case 'add':
|
||||
handleAdd()
|
||||
break;
|
||||
case 'export':
|
||||
handleExport()
|
||||
case 'edit':
|
||||
handleEdit()
|
||||
break;
|
||||
case 'detail':
|
||||
handleDetail()
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user