|
@@ -1,16 +1,14 @@
|
|
|
<script setup lang="ts">
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
import { GlobalStore } from '@/stores/index'
|
|
|
-import { ref, reactive, nextTick } from 'vue'
|
|
|
+import { ref, reactive } from 'vue'
|
|
|
import { UserFilled } from '@element-plus/icons-vue'
|
|
|
import TableBase from '@/components/TableBase/index.vue'
|
|
|
-import { ColumnProps } from '@/components/TableBase/interface/index'
|
|
|
-import { Project_List, Project_Get, Project_Edit, Project_User_List, Project_Approval } from '@/api/project/index'
|
|
|
import { Edit, View, CircleCheck } from '@element-plus/icons-vue'
|
|
|
-import Drawer from '@/components/Drawer/index.vue'
|
|
|
-import ProjectDetail from './ProjectDetail.vue'
|
|
|
-import type { FormInstance, FormRules } from 'element-plus'
|
|
|
import { useTablePublic, Project_State } from '@/hooks/useTablePublic'
|
|
|
+import { ColumnProps } from '@/components/TableBase/interface/index'
|
|
|
+import { Project_List, Project_User_List, Project_Approval } from '@/api/project/index'
|
|
|
+import ProjectForm from './ProjectForm.vue'
|
|
|
|
|
|
interface UserInfoIn {
|
|
|
T_name: string
|
|
@@ -28,22 +26,18 @@ const userInfo = ref<UserInfoIn>({
|
|
|
T_dept_name: '',
|
|
|
T_post_name: ''
|
|
|
})
|
|
|
-const isNew = ref(true)
|
|
|
-const disabled = ref(false)
|
|
|
-const formLabelWidth = ref('120px')
|
|
|
+
|
|
|
const globalStore = GlobalStore()
|
|
|
-const User_tokey = globalStore.GET_User_tokey
|
|
|
-const ruleFormRef = ref<FormInstance>()
|
|
|
-const drawerRef = ref<InstanceType<typeof Drawer> | null>(null)
|
|
|
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
|
|
|
const TableProjectRef = ref<InstanceType<typeof TableBase> | null>(null)
|
|
|
-const projectDetailRef = ref<InstanceType<typeof ProjectDetail> | null>(null)
|
|
|
+const projctFormRef = ref<InstanceType<typeof ProjectForm> | null>(null)
|
|
|
+
|
|
|
const { tableRowClassName } = useTablePublic()
|
|
|
const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.T_uuid, userInfo.value.T_uuid)
|
|
|
|
|
|
const columns: ColumnProps[] = [{ prop: 'T_name', label: '姓名' }]
|
|
|
const columnsProject: ColumnProps[] = [
|
|
|
- { prop: 'Id', label: 'ID' },
|
|
|
+ { type: 'index', label: '序号' },
|
|
|
{ prop: 'T_name', label: '项目名称' },
|
|
|
{ prop: 'T_user_name', label: '项目负责人' },
|
|
|
{ prop: 'T_set_up_date', label: '立项日期' },
|
|
@@ -56,41 +50,6 @@ const columnsProject: ColumnProps[] = [
|
|
|
const initParam = { User_tokey: globalStore.GET_User_tokey }
|
|
|
const initParamProject = reactive({ User_tokey: globalStore.GET_User_tokey, T_uuid: userInfo.value.T_uuid, page_z: 99 })
|
|
|
|
|
|
-const form = ref({
|
|
|
- Id: '',
|
|
|
- T_name: '',
|
|
|
- T_end_date: '',
|
|
|
- T_set_up_date: '',
|
|
|
- T_description: '',
|
|
|
- T_detail: '',
|
|
|
- T_planning_cycle: '',
|
|
|
- T_reality_cycle: '',
|
|
|
- T_bonus: '',
|
|
|
- T_Perf: '',
|
|
|
- T_remark: '',
|
|
|
- T_approver: '',
|
|
|
- T_advance_day: '',
|
|
|
- T_uuid: ''
|
|
|
-})
|
|
|
-const rules = reactive<FormRules>({
|
|
|
- T_name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
|
|
|
-})
|
|
|
-
|
|
|
-const openProjectDrawer = (type: string, row?: any) => {
|
|
|
- isNew.value = type === 'view' ? true : false
|
|
|
- nextTick(async () => {
|
|
|
- if (type === 'view') disabled.value = true
|
|
|
- form.value = { ...row }
|
|
|
- form.value.T_approver = row.T_approver_name
|
|
|
- form.value.T_uuid = row.T_approver
|
|
|
- const res: any = await Project_Get({ T_id: row.Id })
|
|
|
- if (res.Code === 200) {
|
|
|
- projectDetailRef.value?.setDetailData(res.Data.T_Detail)
|
|
|
- }
|
|
|
- })
|
|
|
- drawerRef.value?.openDrawer()
|
|
|
-}
|
|
|
-
|
|
|
const getSalaryParams = (row: any) => {
|
|
|
userInfo.value.T_uuid = ''
|
|
|
setTimeout(() => {
|
|
@@ -98,55 +57,16 @@ const getSalaryParams = (row: any) => {
|
|
|
initParamProject.T_uuid = userInfo.value.T_uuid
|
|
|
}, 100)
|
|
|
}
|
|
|
-
|
|
|
-const callbackDrawer = (done: () => void) => {
|
|
|
- resetForm(ruleFormRef.value)
|
|
|
- projectDetailRef.value?.clearDetail()
|
|
|
- isNew.value = true
|
|
|
- disabled.value = false
|
|
|
- done()
|
|
|
-}
|
|
|
-
|
|
|
-const resetForm = (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return
|
|
|
- formEl.resetFields()
|
|
|
-}
|
|
|
-const addProject = (formEl: FormInstance | undefined) => {
|
|
|
- if (!formEl) return
|
|
|
- formEl.validate(async valid => {
|
|
|
- if (valid) {
|
|
|
- let detail = ''
|
|
|
- projectDetailRef.value?.getDetailInfo().forEach((item: any) => {
|
|
|
- detail += `${item.T_function},${item.T_planned_time},${item.T_finish}|`
|
|
|
- })
|
|
|
- const params = {
|
|
|
- User_tokey,
|
|
|
- ...form.value,
|
|
|
- T_detail: detail,
|
|
|
- T_approver: form.value.T_uuid
|
|
|
- }
|
|
|
-
|
|
|
- const res: any = await Project_Edit({ ...params, T_id: form.value.Id })
|
|
|
-
|
|
|
- if (res.Code === 200) {
|
|
|
- ElMessage.success('项目修改成功!')
|
|
|
- nextTick(() => {
|
|
|
- isNew.value = true
|
|
|
- TableRef.value?.getTableList()
|
|
|
- drawerRef.value?.closeDrawer()
|
|
|
- resetForm(ruleFormRef.value)
|
|
|
- })
|
|
|
- }
|
|
|
- } else return false
|
|
|
- })
|
|
|
-}
|
|
|
const changeState = async (id: number, row: any) => {
|
|
|
const res: any = await Project_Approval({ User_tokey: globalStore.GET_User_tokey, T_id: row.Id, T_State: id })
|
|
|
if (res.Code === 200) {
|
|
|
ElMessage.success('审核成功!')
|
|
|
- TableProjectRef.value?.getTableList()
|
|
|
+ onUpdateTableList()
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+const onUpdateTableList = () => TableProjectRef.value?.getTableList()
|
|
|
+const openProjectDrawer = (type: string, row?: any) => projctFormRef.value?.projectFromOpen(type, row)
|
|
|
</script>
|
|
|
<template>
|
|
|
<div class="project">
|
|
@@ -192,7 +112,7 @@ const changeState = async (id: number, row: any) => {
|
|
|
<template #T_State="{ row }">
|
|
|
<el-dropdown trigger="click" size="small">
|
|
|
<el-button type="primary" size="small" :disabled="row.T_State === 4">
|
|
|
- {{ ['待审核', '进行中', '已完成', '已完成', '已发绩效'][row.T_State]
|
|
|
+ {{ ['待审核', '进行中', '已完成', '已发绩效'][row.T_State - 1]
|
|
|
}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
|
</el-button>
|
|
|
<template #dropdown>
|
|
@@ -219,130 +139,7 @@ const changeState = async (id: number, row: any) => {
|
|
|
</TableBase>
|
|
|
</div>
|
|
|
</transition>
|
|
|
- <Drawer ref="drawerRef" :handleClose="callbackDrawer" size="50%">
|
|
|
- <template #header="{ params }">
|
|
|
- <h4 :id="params.titleId" :class="params.titleClass">项目 - {{ isNew ? '详情' : '编辑' }}</h4>
|
|
|
- </template>
|
|
|
- <el-form ref="ruleFormRef" :model="form" :rules="rules">
|
|
|
- <el-form-item label="项目名称:" :label-width="formLabelWidth" prop="T_name">
|
|
|
- <el-input
|
|
|
- v-model="form.T_name"
|
|
|
- class="w-50"
|
|
|
- :disabled="disabled"
|
|
|
- type="text"
|
|
|
- autocomplete="off"
|
|
|
- placeholder="请输入项目名称"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="项目结束日期:" :label-width="formLabelWidth" prop="T_end_date">
|
|
|
- <el-date-picker
|
|
|
- style="flex: 0 0 50%"
|
|
|
- class="my-date-picker"
|
|
|
- v-model="form.T_end_date"
|
|
|
- :disabled="disabled"
|
|
|
- type="date"
|
|
|
- placeholder="项目结束日期"
|
|
|
- format="YYYY-MM-DD"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="项目立项日期:" :label-width="formLabelWidth" prop="T_set_up_date">
|
|
|
- <el-date-picker
|
|
|
- style="flex: 0 0 50%"
|
|
|
- class="my-date-picker"
|
|
|
- v-model="form.T_set_up_date"
|
|
|
- :disabled="disabled"
|
|
|
- type="date"
|
|
|
- placeholder="项目立项日期"
|
|
|
- format="YYYY-MM-DD"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="项目简介:" :label-width="formLabelWidth" prop="T_description">
|
|
|
- <el-input
|
|
|
- v-model="form.T_description"
|
|
|
- :disabled="disabled"
|
|
|
- :autosize="{ minRows: 6, maxRows: 8 }"
|
|
|
- type="textarea"
|
|
|
- placeholder="请输入项目简介"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="项目明细:" :label-width="formLabelWidth" prop="T_detail">
|
|
|
- <ProjectDetail ref="projectDetailRef" :disabled="disabled" :isShow="false"></ProjectDetail>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="计划完成周期:" :label-width="formLabelWidth" prop="T_planning_cycle">
|
|
|
- <div style="display: flex; white-space: nowrap; flex: 1">
|
|
|
- <el-input
|
|
|
- v-model="form.T_planning_cycle"
|
|
|
- style="flex: 0 0 33.33%"
|
|
|
- :disabled="true"
|
|
|
- type="text"
|
|
|
- autocomplete="off"
|
|
|
- placeholder="请输入计划完成周期"
|
|
|
- />
|
|
|
- <span style="margin: 0 10px">工作日</span>
|
|
|
- <span style="color: #bbb"
|
|
|
- ><el-icon><QuestionFilled /></el-icon>备注;根据项目明细计划时间自动计算</span
|
|
|
- >
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="实际完成周期:" :label-width="formLabelWidth" prop="T_reality_cycle">
|
|
|
- <div style="display: flex; white-space: nowrap; flex: 1">
|
|
|
- <el-input
|
|
|
- v-model="form.T_reality_cycle"
|
|
|
- class="w-50"
|
|
|
- :disabled="disabled"
|
|
|
- type="text"
|
|
|
- autocomplete="off"
|
|
|
- placeholder="请输入实际完成周期"
|
|
|
- />
|
|
|
- <span style="margin: 0 10px">工作日</span>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="提前完成天数:" :label-width="formLabelWidth" prop="T_advance_day">
|
|
|
- <div style="display: flex; white-space: nowrap; flex: 1">
|
|
|
- <el-input
|
|
|
- v-model="form.T_advance_day"
|
|
|
- class="w-50"
|
|
|
- :disabled="disabled"
|
|
|
- type="text"
|
|
|
- autocomplete="off"
|
|
|
- placeholder="请输入提前完成天数"
|
|
|
- />
|
|
|
- <span style="margin: 0 10px">工作日</span>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="奖励金额:" :label-width="formLabelWidth" prop="T_bonus">
|
|
|
- <div style="display: flex; white-space: nowrap; flex: 1">
|
|
|
- <el-input
|
|
|
- v-model="form.T_bonus"
|
|
|
- class="w-50"
|
|
|
- :disabled="disabled"
|
|
|
- type="text"
|
|
|
- autocomplete="off"
|
|
|
- placeholder="请输入奖励金额"
|
|
|
- />
|
|
|
- <span style="margin: 0 10px">元</span>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="绩效总金额:" :label-width="formLabelWidth" prop="T_Perf">
|
|
|
- <div style="display: flex; white-space: nowrap; flex: 1">
|
|
|
- <el-input
|
|
|
- v-model="form.T_Perf"
|
|
|
- class="w-50"
|
|
|
- :disabled="disabled"
|
|
|
- type="text"
|
|
|
- autocomplete="off"
|
|
|
- placeholder="请输入绩效总金额"
|
|
|
- />
|
|
|
- <span style="margin: 0 10px">元</span>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :label-width="formLabelWidth" v-if="!disabled">
|
|
|
- <el-button class="btn" color="#626aef" @click="addProject(ruleFormRef)">提交</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </Drawer>
|
|
|
+ <ProjectForm ref="projctFormRef" projectName="project" @onTableList="onUpdateTableList" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -365,11 +162,6 @@ const changeState = async (id: number, row: any) => {
|
|
|
.box-card {
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
- :deep(.el-table tr) {
|
|
|
- &:hover {
|
|
|
- transition: all 5s ease-in-out;
|
|
|
- }
|
|
|
- }
|
|
|
:deep(.el-table .cell) {
|
|
|
white-space: normal !important;
|
|
|
}
|
|
@@ -400,8 +192,5 @@ const changeState = async (id: number, row: any) => {
|
|
|
font-size: 20px;
|
|
|
color: #707b84;
|
|
|
}
|
|
|
- .w-50 {
|
|
|
- flex: 0 0 50%;
|
|
|
- }
|
|
|
}
|
|
|
</style>
|