任务变更

src/views/task/plan/components/TaskTable.vue

@@ -3,86 +3,93 @@
         <template #header>
             <div class="w-36">
                 <el-select v-model="searchForm.deptId" block clearable placeholder="选择部门" size="large">
-                    <el-option v-for="item in department" :label="item.deptName" :value="item.id"/>
+                    <el-option v-for="item in department" :label="item.deptName" :value="item.id" />
                 </el-select>
             </div>
             <div class="w-36 ml-2">
                 <el-select v-model="searchForm.taskStatus" block clearable placeholder="选择计划状态" size="large">
-                    <el-option label="未完成" value="1"/>
-                    <el-option label="已完成" value="2"/>
-                    <el-option label="逾期完成" value="3"/>
-                    <el-option label="逾期未完成" value="4"/>
+                    <el-option label="未完成" value="1" />
+                    <el-option label="已完成" value="2" />
+                    <el-option label="逾期完成" value="3" />
+                    <el-option label="逾期未完成" value="4" />
                 </el-select>
             </div>
             <div class="w-36 ml-4">
-                <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
+                <el-date-picker v-model="searchForm.startTime" class="block" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large" />
+            </div>
+            <div class="mx-2">
+                ~
             </div>
-            <div class="mx-2">~</div>
             <div class="w-36">
-                <el-date-picker class="block" v-model="searchForm.endTime" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
+                <el-date-picker v-model="searchForm.endTime" class="block" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large" />
             </div>
             <div class="ml-4">
                 <el-button size="large" type="primary" @click="searchClick">
-                    <HcIcon name="search-2"/>
+                    <HcIcon name="search-2" />
                     <span>搜索</span>
                 </el-button>
             </div>
             <div class="ml-2">
                 <el-button size="large" @click="resetClick">
-                    <HcIcon name="close-circle"/>
+                    <HcIcon name="close-circle" />
                     <span>重置</span>
                 </el-button>
             </div>
         </template>
         <template #extra>
-            <el-button size="large" :type="isTableKey === 1?'primary':'info'" :disabled="isTableKey !== 1" hc-btn @click="showChangeState">
-                <HcIcon name="edit-circle"/>
+            <el-button size="large" :type="isTableKey === 1 ? 'primary' : 'info'" :disabled="isTableKey !== 1" hc-btn @click="showChangeState">
+                <HcIcon name="edit-circle" />
                 <span>变更状态</span>
             </el-button>
         </template>
-        <HcTable :column="tableColumn" :isCheck="isTableKey !== 'all'" :datas="tableData" :loading="tableLoading" @selection-change="tableSelectionChange">
-            <template #status="{row}">
-                <span class="text-orange" v-if="row.status === 0">未上报</span>
-                <span class="text-orange" v-if="row.status === 1">待审批</span>
-                <span class="text-green" v-if="row.status === 2">已审批</span>
-                <span class="text-red" v-if="row.status === 3">已驳回</span>
-         
+        <HcTable :column="tableColumn" :is-check="isTableKey !== 'all'" :datas="tableData" :loading="tableLoading" @selection-change="tableSelectionChange">
+            <template #status="{ row }">
+                <span v-if="row.status === 0" class="text-orange">未上报</span>
+                <span v-if="row.status === 1" class="text-orange">待审批</span>
+                <span v-if="row.status === 2" class="text-green">已审批</span>
+                <span v-if="row.status === 3" class="text-red">已驳回</span>
             </template>
         </HcTable>
         <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"/>
+            <HcPages :pages="searchForm" @change="pageChange" />
         </template>
 
-        <!--变更状态-->
-        <HcDialog bgColor="#ffffff" isToBody isTable :loading="changeStateLoading" :show="changeStateModal" title="变更任务状态" widths="62rem"
-                  @close="closeChangeStateClick" @save="saveChangeStateClick">
+        <!-- 变更状态 -->
+        <HcDialog
+            bg-color="#ffffff" is-to-body is-table :loading="changeStateLoading" :show="changeStateModal" title="变更任务状态" widths="62rem"
+            @close="closeChangeStateClick" @save="saveChangeStateClick"
+        >
             <div class="hac-change-state-dialog-body">
                 <div class="hac-dialog-table">
-                    <HcTable :isIndex="false" :column="tableStateColumn" :datas="tableStateData" :loading="tableStateLoading"/>
+                    <HcTable :is-index="false" :column="tableStateColumn" :datas="tableStateData" :loading="tableStateLoading" />
                 </div>
                 <div class="hac-dialog-form">
                     <HcCardItem scrollbar>
                         <el-form ref="formRef" :model="formModel" :rules="formRules" label-width="">
                             <el-form-item label="变更类别：" prop="updateType" size="large">
                                 <el-radio-group v-model="formModel.updateType" size="large">
-                                    <el-radio :label="1">已完成</el-radio>
-                                    <el-radio :label="2" class="ml-8">任务转移</el-radio>
+                                    <el-radio :label="1">
+                                        已完成
+                                    </el-radio>
+                                    <el-radio :label="2" class="ml-8">
+                                        任务转移
+                                    </el-radio>
                                 </el-radio-group>
                             </el-form-item>
-                            <el-form-item label="完成时间：" prop="completionTime" class="w-72" v-if="formModel.updateType === 1">
-                                <el-date-picker class="block" v-model="formModel.completionTime" format="YYYY-MM-DD HH:mm:ss"  type="datetime" value-format="YYYY-MM-DD HH:mm:ss"/>
+                            <el-form-item v-if="formModel.updateType === 1" label="完成时间：" prop="completionTime" class="w-72">
+                                <el-date-picker v-model="formModel.completionTime" class="block" format="YYYY-MM-DD HH:mm:ss" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
                             </el-form-item>
                             <template v-if="formModel.updateType === 2">
                                 <el-form-item label="转移时间：" prop="transfer" class="w-72">
-                                    <el-date-picker class="block" v-model="formModel.completionTime" format="YYYY-MM-DD HH:mm:ss"  type="datetime" value-format="YYYY-MM-DD HH:mm:ss"/>
+                                    <el-date-picker v-model="formModel.completionTime" class="block" format="YYYY-MM-DD HH:mm:ss" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
                                 </el-form-item>
                                 <el-form-item label="转移对象：" prop="type" size="large">
-                                    <el-select class="block" v-model="formModel.transferObject"  filterable allow-create default-first-option :reserve-keyword="false">
-                                        <el-option v-for="item in userList" :label="item.name" :value="item.id"/>
+                                    <el-select v-model="formModel.transferObject" class="block" filterable allow-create default-first-option :reserve-keyword="false">
+                                        <el-option v-for="item in userList" :label="item.name" :value="item.id" />
                                     </el-select>
                                 </el-form-item>
                                 <el-form-item label="转移原因：" prop="textContent">
-                                    <el-input v-model="formModel.transferReason" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea"/>
+                                    <el-input v-model="formModel.transferReason" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入文字说明" type="textarea" />
                                 </el-form-item>
                             </template>
                         </el-form>
@@ -90,18 +97,25 @@
                 </div>
             </div>
         </HcDialog>
-
     </HcCard>
 </template>
 
 <script setup>
-import {ref, nextTick, watch,onMounted,onActivated} from "vue";
-import {useRouter} from 'vue-router'
-import {getArrValue,getObjValue,formValidate,arrToId} from "js-fast-way"
-import planApi from '~api/task/plan.js';
-import { getdepartmentList,getuserList} from "~api/other";
-import {useAppStore} from "~src/store";
-const useAppState = useAppStore();
+import { nextTick, onActivated, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { arrToId, formValidate, getArrValue, getObjValue } from 'js-fast-way'
+import planApi from '~api/task/plan.js'
+import { getdepartmentList, getuserList } from '~api/other'
+import { useAppStore } from '~src/store'
+//参数
+const props = defineProps({
+    tableKey: {
+        type: Number,
+        default: 1,
+    },
+})
+
+const useAppState = useAppStore()
 
 const router = useRouter()
 onActivated(()=>{
@@ -109,10 +123,10 @@ onActivated(()=>{
     getDepartmentDict()
     getUserDict()
 })
-const department=ref([])
+const department = ref([])
 //获取部门列表
-const getDepartmentDict=async()=>{
-    const {error, code, data} = await getdepartmentList({deptType:2})
+const getDepartmentDict = async ()=>{
+    const { error, code, data } = await getdepartmentList({ deptType:2 })
     if (!error && code === 200) {
         department.value = getArrValue(data)
 
@@ -122,9 +136,9 @@ const getDepartmentDict=async()=>{
     }
 }
 //获取所有员工
-const userList=ref([])
-const getUserDict=async()=>{
-    const {error, code, data} = await getuserList({tenantId:useAppState.tenantId})
+const userList = ref([])
+const getUserDict = async ()=>{
+    const { error, code, data } = await getuserList({ tenantId:useAppState.tenantId })
     if (!error && code === 200) {
         userList.value = getArrValue(data)
 
@@ -133,50 +147,42 @@ const getUserDict=async()=>{
 
     }
 }
-//参数
-const props = defineProps({
-    tableKey: {
-        type: Number,
-        default: 1
-    }
-})
-
 //变量
-const isTableKey = ref(props.tableKey);
+const isTableKey = ref(props.tableKey)
 
 //监听
 watch(() => [
     props.tableKey,
 ], ([Key]) => {
-    console.log(Key,'key');
+    console.log(Key, 'key')
     isTableKey.value = Key
-    searchForm.value.selectType=Key
+    searchForm.value.selectType = Key
     getTableData()
    
 })
 
 //搜索表单
 const searchForm = ref({
-    deptId: null, selectType:isTableKey.value, planStartTime: null, planEndTime: null,taskStatus:null,
-    current: 1, size: 20, total: 0
+    deptId: null, selectType:isTableKey.value, planStartTime: null, planEndTime: null, taskStatus:null,
+    current: 1, size: 20, total: 0,
 })
 
 //搜索
 const searchClick = () => {
-    searchForm.value.current = 1;
+    searchForm.value.current = 1
     getTableData()
 }
 
 //重置
 const resetClick = () => {
     searchForm.value = {
-        deptId: null, selectType:isTableKey.value, planStartTime: null, planEndTime: null,taskStatus:null,
-        current: 1, size: 20, total: 0
+        deptId: null, selectType:isTableKey.value, planStartTime: null, planEndTime: null, taskStatus:null,
+        current: 1, size: 20, total: 0,
     }
 }
 
 //分页被点击
-const pageChange = ({current, size}) => {
+const pageChange = ({ current, size }) => {
     searchForm.value.current = current
     searchForm.value.size = size
     getTableData()
@@ -185,18 +191,18 @@ const pageChange = ({current, size}) => {
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = ref([
-    {key: 'projectName', name: '任务所属项目'},
-    {key: 'status', name: '状态', width: '120', align: 'center'},
-    {key: 'taskDesc', name: '任务描述'},
-    {key: 'planTarget', name: '完成指标'},
-    {key: 'startAndEndDate', name: '计划起止日期', width: '220', align: 'center'},
-    {key: 'taskUserName', name: '任务人', width: '120', align: 'center'},
+    { key: 'projectName', name: '任务所属项目' },
+    { key: 'status', name: '状态', width: '120', align: 'center' },
+    { key: 'taskDesc', name: '任务描述' },
+    { key: 'planTarget', name: '完成指标' },
+    { key: 'startAndEndDate', name: '计划起止日期', width: '220', align: 'center' },
+    { key: 'taskUserName', name: '任务人', width: '120', align: 'center' },
 ])
 const tableData = ref([])
-const getTableData = async() => {
+const getTableData = async () => {
     //const key = isTableKey.value
     tableLoading.value = true
-    const {error, code, data} = await planApi.getPage(searchForm.value)
+    const { error, code, data } = await planApi.getPage(searchForm.value)
     tableLoading.value = false
     if (!error && code === 200) {
         tableData.value = getArrValue(data['records'])
@@ -216,26 +222,27 @@ const tableSelectionChange = (rows) => {
 //变更状态的弹窗
 const changeStateLoading = ref(false)
 const changeStateModal = ref(false)
-const isCanchange=ref(false)
+const isCanchange = ref(false)
 //显示变更状态的弹窗
 const showChangeState = () => {
     changeStateLoading.value = false
-    if(tableRows.value.length<1){
+    isCanchange.value = false
+    if (tableRows.value.length < 1) {
         window.$message.warning('请先勾选数据')
-    }else{
-        console.log(tableRows.value,'tableRows.value');
+    } else {
+        console.log(tableRows.value, 'tableRows.value')
    
         tableRows.value.forEach((ele)=>{
-            if(ele.status===1||ele.status===2){
-                isCanchange.value=true
+            if (ele.status === 1 || ele.status === 2) {
+                isCanchange.value = true
             }
         })
-        if(isCanchange.value){
+        if (isCanchange.value) {
             window.$message.warning('待审批或者已审批状态不能点击变更')
-        }else{
+        } else {
             changeStateModal.value = true
-            formModel.value={}
-            tableStateData.value=tableRows.value
+            formModel.value = {}
+            tableStateData.value = tableRows.value
         }
     
     }
@@ -246,16 +253,16 @@ const showChangeState = () => {
 //变更任务状态表格
 const tableStateLoading = ref(false)
 const tableStateColumn = [
-    {key: 'taskPlanName', name: '任务名称'},
-    {key: 'taskDesc', name: '任务描述'},
-    {key: 'statusName', name: '状态', width: '120', align: 'center'},
+    { key: 'taskPlanName', name: '任务名称' },
+    { key: 'taskDesc', name: '任务描述' },
+    { key: 'statusName', name: '状态', width: '120', align: 'center' },
 ]
 const tableStateData = ref([
-    {id: 1, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
-    {id: 2, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
-    {id: 3, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
-    {id: 4, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
-    {id: 5, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx',  key3: '未完成'},
+    { id: 1, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx', key3: '未完成' },
+    { id: 2, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx', key3: '未完成' },
+    { id: 3, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx', key3: '未完成' },
+    { id: 4, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx', key3: '未完成' },
+    { id: 5, key1: 'xxxxxxxxx', key2: 'xxxxxxxxx', key3: '未完成' },
 ])
 
 
@@ -268,7 +275,7 @@ const formRules = {
     updateType: {
         required: true,
         trigger: 'blur',
-        message: "请选择变更类别"
+        message: '请选择变更类别',
     },
 }
 
@@ -281,19 +288,19 @@ const closeChangeStateClick = () => {
 
 //提交变更状态弹窗
 
-const saveChangeStateClick = async() => {
-    console.log(formModel.value,'formModel');
+const saveChangeStateClick = async () => {
+    console.log(formModel.value, 'formModel')
     const res = await formValidate(formRef.value)
     const ids = arrToId(tableRows.value, 'id')
-    formModel.value.taskIds=ids
-    if(res){
-        changeStateLoading.value=true
-        const {error, code, data,msg} = await planApi.submit( formModel.value)
-        changeStateLoading.value=false
+    formModel.value.taskIds = ids
+    if (res) {
+        changeStateLoading.value = true
+        const { error, code, data, msg } = await planApi.submit( formModel.value)
+        changeStateLoading.value = false
         if (!error && code === 200) {
             window.$message.success(msg)
             getTableData()
-        } else{
+        } else {
             window.$message.warning(msg)
         }
     }