Merge pull request 'feat:新增终审卡片效果' (#191) from fix/change_task into test

Reviewed-on: #191

src/views/final/aside/Aside.vue

@@ -401,7 +401,7 @@ function updateComponent(key, e) {
   border: 1px solid #efeff5;
   border-radius: 3px;
   box-sizing: border-box;
-
+  height: 100% !important;
   &-header {
     padding: 10px;
     width: 100%;

src/views/final/content/ListContent.vue

@@ -1,8 +1,34 @@
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive, unref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import testImg from "@/assets/images/test.png";
-import {chunk} from 'lodash-es'
+import { chunk } from "lodash-es";
+import type { RowData } from "@/config/final";
+import { getFinalList } from "@/api/final";
+import { useFinal } from "@/store/modules/final";
+import { formatToDateHMS } from "@/utils/dateUtil";
+import { useMessage, useDialog } from "naive-ui";
+import { audit } from "@/api/task/task";
+import NotPassed from "@/components/Approval/NotPassed.vue";
+import { RepeatModal, RepeatTaskTableModal } from "../comp";
+const dialog = useDialog();
+const message = useMessage();
+const router = useRouter();
+const notPassModalRef = ref(null); // 不通过弹窗
+const sortorder = ref("asc");
+const sortname = ref("states");
+const loading = ref(true);
+const total = ref(0);
 
+const tableData = ref<any>([]);
+const finalStore = useFinal();
+const pagination = reactive({
+  page: 1,
+  pageCount: 20,
+  pageSize: 20,
+});
+const repeatModalRef = ref(null);
+const repeatTaskTableModalRef = ref(null);
 const emit = defineEmits(["changeShow"]);
 function changeContent() {
   emit("changeShow");
@@ -14,23 +40,172 @@ const initRem = () => {
   document.documentElement.style.fontSize = scale * rempPx + "px";
 };
 
+function initData() {
+  query(1, 10);
+}
+async function query(
+  page: number,
+  pageSize: number,
+  filterId?: any,
+  taskName?: string
+) {
+  console.log("query", taskName);
+
+  const asideParmas = unref(finalStore.getAsideValue);
+  // 有过滤配置的时候优先使用过滤配置，不要使用左侧参数
+  // let params = filterId ? { userSearchId: filterId } : asideParmas
+  let params = asideParmas;
+  params = params?.izshowall ? {} : params;
+
+  const result = await getFinalList({
+    sortorder: sortorder.value,
+    pageSize,
+    currPage: page,
+    sortname: sortname.value,
+    taskName,
+    ...params,
+  });
+  const { data, pageCount, totalCount } = result;
+  console.log(data, pageCount, totalCount);
+
+  tableData.value = data;
+
+  total.value = totalCount;
+  pagination.page = page;
+  pagination.pageCount = Math.ceil(totalCount / pageSize);
+  loading.value = false;
+  tableData.value.map((item) => {
+    item.createdate = formatToDateHMS(item.createdate);
+  });
+
+  tableData.value = chunk(tableData.value, 4);
+}
+//查看详情页
+function goDetail(row) {
+  router.push({
+    name: "final-detail",
+    query: { id: row.id, packageid: row.packageid },
+  });
+}
+// 小结批量不通过
+function repeatBatchReject(items) {
+  console.log(items);
+  rejectHandler(items);
+}
+// 审核不通过
+function rejectHandler(list) {
+  const msg = validate(list);
+  if (msg !== null) {
+    message.error(msg);
+    return;
+  }
+  function validate(items: any[]) {
+    if (items.length === 0) return "至少选中一个任务";
+    return null;
+  }
+  const modal = unref(notPassModalRef)! as any;
+  modal.showModal(list);
+}
+
+function showModal(modalRef: any) {
+  const modal = unref(modalRef)! as any;
+  modal.showModal();
+}
 onMounted(() => {
   initRem();
+  initData();
 });
 const item = {
   img: testImg,
   checked: false,
-  title: "YP4567890545",
+  title: "YP45678",
   date: "2023-12-19 12:09:18",
 };
 const data = ref<any[]>([]);
+function actionHandler(action: any, row: any) {
+  const { key } = action;
+  switch (key) {
+    case "view":
+      goDetail(row);
+      break;
+    case "reset":
+      // resetHandler()
+      break;
+    case "approval":
+      singleApproval(row);
+      break;
+    case "reject":
+      rejectHandler([row]);
+      break;
+    default:
+      break;
+  }
+}
+// 单个审批通过
+function singleApproval(row) {
+  console.log(row);
+  const param = {
+    result: true,
+    comment: "",
+    disposeType: "",
+    disposeTypeId: "",
+    failCauseId: "",
+    failCauseName: "",
+    flowTaskInfoList: [
+      {
+        formId: row.id,
+        taskId: row.taskId,
+        taskName: row.fromTaskName,
+      },
+    ],
+  };
+  doAudit(param, row);
+}
 
-onMounted(() => {
+// 审核通过
-  for (let i = 0; i < 8; i++) {
+function doAudit(param: any, row: any) {
-    data.value.push(item as any);
+  dialog.info({
+    title: "确认提示",
+    content: "确认给该任务审批为【通过】吗?",
+    positiveText: "确定",
+    negativeText: "取消",
+    onPositiveClick: () => {
+      audit(param).then((res) => {
+        const { code } = res;
+        if (code === "OK") {
+          message.success(res.message);
+          //changecardstatus(3, row);
+            query(1, 10);
+          reload();
+        } else {
+          message.error(res.message);
         }
-  data.value = chunk(data.value,4)
       });
+    },
+    onNegativeClick: () => {},
+  });
+}
+//修改卡片状态渲染效果
+function changecardstatus(states, item) {
+  //let index = tableData.value.findIndex(itemx => itemx.id === item.id);
+  let newlist = [];
+  tableData.value.map((itemarr, indexarr) => {
+    itemarr.map((itemobj: any, indexobj) => {
+      if (item.id == itemobj.id) {
+        itemobj.states = states;
+      }
+      newlist.push(itemobj);
+    });
+  });
+  tableData.value = chunk(newlist, 4);
+}
+
+function reload() {
+  //selectionIds.value = []
+  //checkedRowKeys.value = []
+  //  const { page, pageSize } = unref(tableRef.value?.pagination) as PaginationProps
+  //  query(page!, pageSize!)
+}
 </script>
 
 <template>
@@ -45,43 +220,203 @@ onMounted(() => {
           @click="changeContent"
         />
       </div>
+      <div>
+        <SvgIcon
+          style="margin-right: 6px"
+          size="13"
+          name="summary"
+          @click="showModal(repeatModalRef)"
+        />
+        <NButton class="xjcc" text @click="showModal(repeatModalRef)">
+          小结查重
+        </NButton>
+
+        <div v-show="!showActions" style="display: flex; align-items: center">
+          <div class="btn">
+            <SvgIcon style="margin-right: 6px" size="22" name="batch" />
+            批量审批
+          </div>
+        </div>
+        <div v-show="showActions" class="batch">
+          <NButton text @click="switchBatch()">
+            <template #icon>
+              <SvgIcon name="revoke" />
+            </template>
+            取消
+          </NButton>
+
+          <img
+            class="btn-approval btn-left"
+            src="@/assets/images/task/btn-not-pass.png"
+            alt=""
+            @click.stop="batchReject"
+          />
+          <SvgIcon size="24" name="vs" />
+          <img
+            class="btn-approval"
+            src="@/assets/images/task/btn-pass.png"
+            alt=""
+            @click.stop="batchApproval"
+          />
+        </div>
+
+        <n-popover
+          ref="popover"
+          :style="{ padding: '0px' }"
+          style="width: 148px"
+          :show-arrow="false"
+          placement="bottom-start"
+          trigger="click"
+        >
+          <template #trigger>
+            <div class="icon-wrap">
+              <SvgIcon size="20" name="more-blue" />
+            </div>
+          </template>
+          <ul class="wrapper-header-action">
+            <li @click="importHandler">
+              <SvgIcon size="20" name="import" /><span style="margin-left: 5px"
+                >批量导入数据</span
+              >
+            </li>
+            <li @click="exportHandler">
+              <SvgIcon size="20" name="download" /><span
+                style="margin-left: 5px"
+                >导出待审数据</span
+              >
+            </li>
+            <li>
+              <SvgIcon size="20" name="download" /><span
+                style="margin-left: 5px"
+                >导出全部数据</span
+              >
+            </li>
+            <li>
+              <SvgIcon size="20" name="look" /><span style="margin-left: 5px"
+                >查看导入记录</span
+              >
+            </li>
+          </ul>
+        </n-popover>
+      </div>
     </div>
 
     <div class="header_data">
       <DataHeader :hasColor="true" />
     </div>
 
-    <div class="data_wrapper" v-for="(sitem,sindex) in data" :key="sindex">
+    <div
-      <div class="item" v-for="(item, index) in sitem" :key="index">
+      class="data_wrapper"
+      v-for="(sitem, sindex) in tableData"
+      :key="sindex"
+      :style="
+        sitem.length == 1
+          ? { width: '25%' }
+          : sitem.length == 2
+          ? { width: '50%' }
+          : sitem.length == 3
+          ? { width: '75%' }
+          : {}
+      "
+    >
+      <div
+        class="item"
+        v-for="(item, index) in sitem"
+        :key="index"
+        :style="
+          sitem.length == 1
+            ? { width: '25%' }
+            : sitem.length == 2
+            ? { margin: '0 2% 0 2%' }
+            : sitem.length == 3
+            ? { width: '75%' }
+            : {}
+        "
+      >
         <div class="top">
           <div
             class="img"
             :style="`background:url(${item.img});background-size:100%;background-repeat: no-repeat;`"
           >
-            <!-- <div class="check_box"><n-checkbox size="medium" label=" " /></div> -->
+            <div class="check_box" v-show="item.states == 2">
+              <n-checkbox size="medium" label=" " />
+            </div>
           </div>
           <div class="content">
-            <div class="title">任务ID：{{ item.title }}</div>
+            <div class="title">
-            <div class="date">{{ item.date }}</div>
+              <n-ellipsis style="max-width: 8.5vw">
+                任务ID：{{ item.fromtaskid }}
+              </n-ellipsis>
+            </div>
+            <div class="date">
+              <n-ellipsis style="max-width: 8.5vw"
+                >{{ item.createdate }}
+              </n-ellipsis>
+            </div>
             <div class="tag_box">
               <div
                 class="tag_item"
                 v-for="index in 2"
                 :key="index"
-                :style="index == 2 ? 'color:#02C984' : 'color:#507AFD'"
+                :style="
+                  index == 2 || item.states == 3
+                    ? 'color:#02C984'
+                    : item.states == 2
+                    ? 'color: #fe9800;background:#f7eac0'
+                    : item.states == 5
+                    ? 'color:#FF4E4F;background:#f7c0c0'
+                    : 'color:#02C984'
+                "
               >
-                {{ index == 1 ? "待确认" : "张思" }}
+                {{
+                  index == 1
+                    ? item.states == 3
+                      ? "通过"
+                      : item.states == 2
+                      ? "待审核"
+                      : item.states == 5
+                      ? "未通过"
+                      : ""
+                    : item.fromusername
+                }}
               </div>
             </div>
           </div>
         </div>
         <div class="bottom">
-          <div class="resovle_action">通过</div>
+          <!-- <div class="reset_action">重置审批</div>-->
-          <div class="reject_action">不通过</div>
+          <div
+            class="resovle_action"
+            v-show="item.states != 2"
+            @click="goDetail(item)"
+          >
+            查看
+          </div>
+          <div
+            class="resovle_action"
+            v-show="item.states == 2"
+            @click="actionHandler({ key: 'approval' }, item)"
+          >
+            通过
+          </div>
+          <div
+            class="reject_action"
+            v-show="item.states == 2"
+            @click="actionHandler({ key: 'reject' }, [item])"
+          >
+            不通过
           </div>
         </div>
       </div>
     </div>
+    <NotPassed ref="notPassModalRef" @success="reload" />
+    <RepeatModal
+      ref="repeatModalRef"
+      @reject="repeatBatchReject"
+      @viewrepeat="showModal(repeatTaskTableModalRef)"
+    />
+    <RepeatTaskTableModal ref="repeatTaskTableModalRef" />
+  </div>
 </template>
 
 <style scoped lang="less">
@@ -91,11 +426,30 @@ onMounted(() => {
   // align-items: center;
   // justify-content: flex-start;
   // flex: 1;
+  // box-sizing: border-box;
+  // margin-left: 16px;
+  //width: 100%;
+  //background: #fff;
+  // padding: 0px 24px 24px 24px;
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  flex-direction: column;
   box-sizing: border-box;
   margin-left: 16px;
   width: 100%;
   background: #fff;
   padding: 0px 24px 24px 24px;
+  .icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    background: rgba(80, 122, 253, 0.1);
+    border-radius: 8px;
+    cursor: pointer;
+  }
   &-header {
     display: flex;
     justify-content: space-between;
@@ -103,7 +457,6 @@ onMounted(() => {
     box-sizing: border-box;
     height: 64px;
     width: 100%;
-
     div {
       display: flex;
       align-items: center;
@@ -176,39 +529,47 @@ onMounted(() => {
     flex-flow: row wrap;
     align-items: center;
     // justify-content: flex-start;
-    justify-content: space-between;
+    // justify-content: space-between;
-    flex: 1;
+    // flex: 1;
     .item {
-      min-width: 14.125rem;
+      flex: 1;
-      border: 1px solid #ededed;
+      min-width: 23%;
-      border-radius: 3px;
+      margin-left: 2.3%;
-      padding: 8px 10px;
+      height: 12.4vh;
-      margin-right: 20px;
+      background: #ffffff;
-      margin-bottom: 16px;
+      border: 0.075rem solid #e8e8e8;
+      border-radius: 0.18rem;
+      padding: 0.5rem 0.625rem;
+      // margin-right: 20px;
+      margin: 0 1% 0 1%;
+      margin-bottom: 1rem;
       .top {
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
         justify-content: flex-start;
+        height: 75%;
+        border-bottom: 0.05rem solid #e8e8e8;
         .img {
-          width: 84px;
+          width: 35%;
-          height: 55px;
+          //width: 5.25rem;
+          height: 3.43rem;
           // height: auto;
           object-fit: cover;
-          border-radius: 3px;
+          border-radius: 0.18rem;
           .check_box {
-            margin-left: 8px;
+            margin-left: 0.5rem;
           }
         }
         .content {
-          margin-left: 8px;
+          margin-left: 0.8rem;
           .title,
           .date {
-            font-size: 11px;
+            font-size: 0.68rem;
             font-weight: bolder;
             text-align: left;
             color: #323233;
-            line-height: 16px;
+            line-height: 1rem;
           }
         }
         .tag_box {
@@ -217,21 +578,21 @@ onMounted(() => {
           align-items: center;
           justify-content: flex-start;
           .tag_item {
-            min-width: 31px;
+            min-width: 1.93rem;
-            min-height: 14px;
+            min-height: 0.875rem;
-            font-size: 10px;
+            font-size: 0.625rem;
-            padding: 1px 3px;
+            padding: 0.0625rem 0.18rem;
             font-weight: bolder;
             text-align: left;
             //   color: #507afd;
-            line-height: 14px;
+            line-height: 0.875rem;
-            letter-spacing: 0.1px;
+            letter-spacing: 0.006rem;
-            margin-right: 8px;
+            margin-right: 0.5rem;
             // opacity: 0.1;
             background: #c0f7e4;
-            border-radius: 2px;
+            border-radius: 0.125rem;
             text-align: center;
-            white-space: nowrap
+            white-space: nowrap;
           }
         }
       }
@@ -240,23 +601,31 @@ onMounted(() => {
         flex-flow: row nowrap;
         align-items: center;
         justify-content: flex-end;
+        margin-top: 0.375rem;
         div {
           cursor: pointer;
         }
+        .reset_action {
+          font-size: 0.75rem;
+          font-weight: bolder;
+          text-align: left;
+          color: #666666;
+        }
         .resovle_action {
-          font-size: 12px;
+          font-size: 0.75rem;
           font-weight: bolder;
           text-align: left;
           color: #507afd;
-          line-height: 17px;
+          line-height: 1rem;
+          margin-left: 0.9rem;
         }
         .reject_action {
-          font-size: 12px;
+          font-size: 0.75rem;
           font-weight: bolder;
           text-align: left;
-          color: #FF4E4F;
+          color: #ff4e4f;
-          line-height: 17px;
+          line-height: 1rem;
-          margin-left: 15px;
+          margin-left: 0.9rem;
         }
       }
     }

src/views/final/index.vue

@@ -9,7 +9,7 @@ import Robot from '@/components/Robot/index.vue'
 defineOptions({
   name: 'FinalMain',
 })
-const showList = ref(false)
+const showList = ref(true)
 const contentRef: any = ref(null)
 function inputChange(keyword) {
   contentRef.value.filterTableData(keyword)
@@ -21,11 +21,13 @@ function inputChange(keyword) {
     <!-- 侧边 -->
     <Aside @input-change="inputChange" />
 
-    <!-- 内容 -->
-    <Content v-show="!showList" ref="contentRef" @change-show="showList = true" />
     <!-- 任务管理 -->
     <!-- TODO:本地演示即可 上传注释注释 -->
     <ListContent v-show="showList" @change-show="showList = false" />
+
+    <!-- 内容 -->
+    <Content v-show="!showList" ref="contentRef" @change-show="showList = true" />
+
     <!-- 机器人 -->
     <Robot />
   </div>