小调整

vue/src/components/basic/approve/Apply.vue

@@ -0,0 +1,141 @@
+<template>
+  <a-modal
+    title="申请下载"
+    :width="500"
+    :visible="options.visible"
+    :ok-text="'提交审核'"
+    :cancel-text="'取消'"
+    @cancel="close()"
+    @ok="submitForm"
+    :closable="true">
+    <a-form ref="formRef" :model="formState">
+      <a-divider orientation="left">申请原因</a-divider>
+      <a-form-item name="comment"
+                   :rules="[{ required: true, message: '请填写申请原因' }]">
+        <a-textarea :auto-size="{ minRows: 2, maxRows:4 }" v-model:value="formState.comment" placeholder=""/>
+      </a-form-item>
+      <a-divider orientation="left">流程信息</a-divider>
+      <a-timeline>
+        <a-timeline-item>
+          <template #dot>
+            <CheckCircleTwoTone twoToneColor="#52c41a" style="font-size: 16px"/>
+          </template>
+          <p style="color: gray">开始</p>
+          <p style="color: gray">提交下载申请</p>
+        </a-timeline-item>
+        <a-timeline-item>
+          <template #dot>
+            <SyncOutlined twoToneColor="#52c41a" spin style="font-size: 16px"/>
+          </template>
+          <p><b>下一步处理人</b></p>
+          <div class="user-content">
+            <div class="user-item" v-for="it in userList" @click="it.checked=!it.checked"
+                 :style="{ borderColor: it.checked?'#50a14f':'#eef0f4'}">
+              <a-avatar style="background-color: #87d068">
+                <template #icon>
+                  <UserOutlined />
+                </template>
+              </a-avatar>{{ it.Name }}
+            </div>
+          </div>
+        </a-timeline-item>
+        <a-timeline-item color="red">
+          <template #dot>
+            <HistoryOutlined style="font-size: 16px"/>
+          </template>
+          <p style="color: gray">结束</p>
+          <p style="color: gray">审核结束，下载数据</p>
+        </a-timeline-item>
+      </a-timeline>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref, reactive} from "vue";
+import {Modal} from "ant-design-vue";
+import {save} from '@/api/common';
+import {getUserListPage} from "@/api/system/user";
+
+export default defineComponent({
+  name: 'Apply',
+  props: {
+    options: {type: Object, default: {}}
+  },
+  emits: [
+    "close", "ok"
+  ],
+  setup(props, {emit}) {
+    console.log(props, emit);
+    const formRef = ref();
+    const formState = reactive({
+      comment: ''
+    });
+    const userList = ref([]);
+
+    const getUserList = async function () {
+      const result: any = await getUserListPage({page: 1, limit: 20});
+
+      userList.value = result.list;
+    }
+
+    const submitForm = () => {
+      if (formRef.value == undefined) {
+        return;
+      }
+      formRef.value.validate().then(() => {
+        save('', {}).then(data => {
+          if (data) {
+            Modal.info({
+              title: '提示',
+              content: '提交成功',
+              onOk() {
+                closing();
+                emit('ok');
+              }
+            });
+          }
+        });
+      }).catch((error) => {
+        console.log('error', error);
+      });
+    };
+    const closing = () => {
+      formRef.value?.clearValidate();
+      props.options.visible = false;
+      formState.comment = '';
+    };
+    const close = () => {
+      closing();
+      emit('close');
+    };
+
+    return {
+      formRef, close,
+      formState, getUserList,userList,
+      submitForm,
+    };
+  },
+  created() {
+    this.getUserList();
+  }
+})
+</script>
+<style lang="less" scoped>
+.user-content {
+  display: flex;
+  width: 100%;
+  grid-gap: 10px 10px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+
+  .user-item {
+    width: 22%;
+    border: 2px solid #eef0f4;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    padding-left: 5px;
+  }
+}
+</style>

vue/src/plugins/antd.ts

@@ -19,7 +19,7 @@ import {
   Switch,
   Space, Cascader,
   Tree,
-  Transfer,Image,Progress,List,Avatar,Badge,Spin,Pagination,Popover,Tag
+  Transfer,Image,Progress,List,Avatar,Badge,Spin,Pagination,Popover,Tag,Timeline
 } from 'ant-design-vue';
 import type { App } from 'vue';
 //导入组件库
@@ -68,5 +68,6 @@ export function setupAntd(app: App<Element>) {
     .use(Transfer)
     .use(Cascader)
     .use(Image)
-    .use(Tree).use(Progress).use(List).use(Avatar).use(Badge).use(Spin).use(Pagination).use(Popover).use(Tag);
+    .use(Tree).use(Progress).use(List).use(Avatar).use(Badge).use(Spin).use(Pagination).use(Popover).use(Tag)
+    .use(Timeline);
 }

vue/src/views/query/table.vue

@@ -78,6 +78,7 @@
                               @confirm="deleteSingle(item.tempId)">
                   <DeleteOutlined key="ellipsis"/>
                 </a-popconfirm>
+                <CloudDownloadOutlined key="edit" @click="down(item.tempId)"/>
               </template>
               <a-popover title="详细信息" :visible="item.visible">
                 <template #content>
@@ -122,6 +123,7 @@
                   :pageSize="pagination.pageSize" :show-total="total => `共 ${total} 条`"
                   @change="(current)=>handleTableChange({ current: current,pageSize: pagination.pageSize })"
                   @showSizeChange="(current,pageSize)=>handleTableChange({ current: current,pageSize: pageSize })"/>
+    <Apply @ok="applyOk" v-model:options="applyOptions"></Apply>
   </div>
 </template>
 
@@ -135,10 +137,11 @@ import {useTabsViewStore} from "@/store/modules/tabsView";
 import {message} from "ant-design-vue";
 import {getPaginationTotalTitle} from "@/utils/common";
 import dayjs from "dayjs";
+import Apply from '@/components/basic/approve/Apply.vue'
 
 export default defineComponent({
   name: 'tempList',
-  components: {},
+  components: {Apply},
   setup() {
     const route = useRoute();
     const router = useRouter();
@@ -150,6 +153,8 @@ export default defineComponent({
     const formState = reactive({
       page: 1, rows: 10, tempName: '', tempNo: '', tempId: "", beiginDate: '', endDate: '', total: 0, isPostManage: true
     });
+    const applyOptions = ref({visible: false, tempId: ""});
+
     const columns: TableColumnsType = [
       {
         title: '序号',
@@ -230,6 +235,13 @@ export default defineComponent({
     const onSelectChange = (keys: any) => {
       selectedRowKeys.value = keys;
     };
+    const down = (tempId) => {
+      applyOptions.value.tempId = tempId;
+      applyOptions.value.visible = true;
+    }
+    const applyOk = (args) => {
+      console.log(args);
+    }
     return {
       router,
       route,
@@ -237,7 +249,7 @@ export default defineComponent({
       formRef, onRangeChange,
       formState, viewModel, dayjs,
       columns, data, loading, selectedRowKeys,
-      pagination,
+      pagination, down, applyOptions, applyOk,
       handleTableChange,
       onSelectChange,
       onFinish,