审批配置-新增布局

src/assets/styles/index.scss

@@ -144,6 +144,7 @@ aside {
   border-radius: 2px;
   flex: 1; /* 占满剩余高度 */
   padding: 30px;
+
 }
 .content{
   padding: 20px;

src/views/approvalConfiguration/index.vue

@@ -11,24 +11,24 @@
               style="width: 220px"
           />
         </el-form-item>
-        <el-form-item label="审批类型" prop="projectManagerId">
+        <el-form-item label="审批类型" >
           <el-select
-              v-model="queryParams.projectManagerId"
-              placeholder="请选择项目经理"
+              v-model="queryParams.approveType"
+              placeholder="请选择审批类型"
               style="width: 220px"
               clearable
           >
-
+          <el-option v-for="item in approveTypeList.value" :key="item" :label="item.dictLabel" :value="item.dictValue"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="创建人" prop="projectStatus">
-          <el-select
-              v-model="queryParams.projectStatus"
-              placeholder="请选择项目状态"
-              style="width: 220px"
+          <el-input
+              v-model="queryParams.projectName"
+              placeholder="请输入创建人"
               clearable
-          >
-          </el-select>
+              style="width: 220px"
+          />
+
         </el-form-item>
         <!-- 操作按钮 -->
         <el-form-item style="padding-left: 5.4%">
@@ -49,7 +49,7 @@
 
       </el-form>
     </div>
-    <div class="contentTable">
+    <div class="contentTable" style="position: relative">
       <div style="" class="topDiv">
         <span class="bold-text1" style="">审批配置</span>
         <span style="padding-left: 80%">
@@ -108,41 +108,68 @@
           </template>
         </el-table-column>
       </el-table>
-      <div class="pagination-containerA">
 
-      </div>
+          <pagination
+              class="pagination-div"
+              v-show="total>0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getList"
+          />
+
+
+
     </div>
   </div>
 
 </template>
 <script setup>
-import {ref,onMounted} from 'vue'
+import {ref,onMounted,toRaw} from 'vue'
+import { useRouter } from 'vue-router'
 import { getList } from "../../api/approvalConfiguration/approvalConfiguration.js";
 const { proxy } = getCurrentInstance();
-const { approve_type} = proxy.useDict('approve_type');
+import { getDicts } from "@/api/system/dict/data";
+const {approve_type} = proxy.useDict('approve_type');
 
 
 //变量定义
+let approveTypeList = reactive([])
 const  loading = ref(false)
 const tableDataList = reactive([])
-
+let total = ref(10)
 const queryParams = reactive({
   userName:'',
   projectName:null,
-  status:null
+  status:null,
+  pageNum: 1,
+  pageSize: 10,
 })
 
 //方法定义
 const getTableDataList = ()=>{
   getList().then(res => {
-    tableDataList.value = res.data
-    console.log("res",tableDataList.value)
+    total.value = res.total
+    tableDataList.value = res.rows
+  })
+}
+const router = useRouter()
+const handleAdd = ()=>{
+  router.push({ path: '/system/approvalConfiguration/info' })
+}
+
+const getDictList = ()=>{
+  getDicts("approve_type").then(res=>{
+    console.log(res)
+    approveTypeList.value = res.data
   })
 }
 
 
+
 onMounted(()=>{
   getTableDataList()
+  getDictList()
 })
 
 
@@ -152,6 +179,15 @@ onMounted(()=>{
 
 
 <style scoped lang="scss">
+.pagination-div{
+
+
+  position: absolute;
+  bottom: 36px;
+
+  left: 62.5%;
+  transform: translateX(-50%);
+}
 .topDiv{
   margin-bottom: 30px;
   padding-left: 8px ;

src/views/approvalConfiguration/info.vue

+<template>
+  <div class="app-container">
+    <div class="content" style="position: relative">
+      <div style="padding-left: 10px">
+        <span  class="bold-text" style="border-bottom: 3px solid #0062FF;">新增审批流程</span>
+      </div>
+      <div style="padding-top: 40px;">
+        <el-form ref="formRef" :model="form" :rules="rules" label-width="150px" >
+
+          <el-row :gutter="10">
+            <el-col :span="8">
+              <el-form-item label="审批名字" prop="approvalName">
+                <el-input v-model="form.approvalName" style="width: 100%" placeholder="请输入审批名字" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="10">
+
+            <el-col :span="8">
+
+              <el-form-item label="审批类型" prop="approveType">
+                <el-select
+                    v-model="form.approveType"
+                    placeholder="请选择审批类型"
+                    clearable
+                >
+                  <el-option
+                      v-for="dict in approveTypeList.value"
+
+                      :key="dict.dictValue"
+                      :label="dict.dictLabel"
+                      :value="dict.dictValue"
+                      style="width: 100%"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="10" v-for="(item,index) in form.flowList">
+            <el-col :span="8">
+              <el-form-item :label="getLabel(index)" >
+                <el-select
+                    v-model="form.flowList[index].nodeRoleId"
+                    placeholder="请选择审批类型"
+                    :clearable="index > 2"
+                    @clear="clearDom(index)"
+                >
+                  <el-option
+                      v-for="dict in allRoleList"
+                      :key="dict.value"
+                      :label="dict.label"
+                      :value="dict.value"
+                      style="width: 100%"
+                  />
+                </el-select>
+
+              </el-form-item>
+            </el-col>
+            <el-col :span="9" v-if="index >= 2 ">
+              <div class="del" @click="del(index)">删除</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="10">
+
+                <el-col :span="8">
+              <el-form-item label="" prop="projectType" >
+                <span @click="addNode" style="color: #0062FF;cursor: pointer">+增加审批节点</span>
+              </el-form-item>
+                </el-col>
+              </el-row>
+          <el-row :gutter="10">
+
+                <el-col :span="8">
+              <el-form-item label="备注" prop="projectType" style="margin-top: -5px">
+                <el-input
+                    v-model="form.remark"
+                    style="width: 100%"
+                    :rows="5"
+                    type="textarea"
+                    placeholder="请输入备注"
+                />
+              </el-form-item>
+                </el-col>
+              </el-row>
+
+        </el-form>
+        <div style="position: absolute;bottom: 42px;right: 52px;">
+          <el-button size="large" @click="goBack" class="btn-B">返 回</el-button>
+<!--          <el-button size="large" type="primary" @click="saveDraft" class="btn-A">保存草稿</el-button>-->
+          <el-button size="large" type="primary" @click="handleSubmit" class="btn-A">提 交</el-button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script setup>
+import {onMounted,ref} from 'vue'
+const { proxy } = getCurrentInstance();
+import { useRouter } from 'vue-router'
+import { getDicts } from "@/api/system/dict/data";
+
+
+
+//定义变量
+const form = reactive({
+  approvalName:null,
+  approveType:null,
+  flowList:[
+    {
+      nodeRoleId:null
+    },
+    {
+      nodeRoleId:null
+    }
+  ]
+})
+const formRef = ref()
+const approveTypeList = reactive([])
+
+const allRoleList = [
+  {
+    label:'本人',
+    value:'1'
+  },
+  {
+    label:'项目经理',
+    value:'2'
+  },
+  {
+    label:'老板',
+    value:'3'
+  }
+]
+const chineseNumbers = ["1","一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
+const rules = reactive({
+  approvalName:[
+    { required: true, message: '请输入审批名字', trigger: 'blur' },
+  ],
+  approveType:[
+    { required: true, message: '请选择审批类型', trigger: 'change' },
+  ]
+})
+
+
+//定义方法
+const getLabel = (i)=>{
+  console.log(i)
+  if(i <= 0 ) return "流程发起人"
+  else return `第${chineseNumbers[i]}节点审批人`;
+}
+
+const addNode = ()=>{
+  form.flowList.push({
+    nodeRoleId:null
+  });
+}
+
+const handleSubmit = ()=>{
+  formRef.value.validate((valid) => {
+    if (valid) {
+
+    }
+  });
+}
+
+
+const getDictList = ()=>{
+  getDicts("approve_type").then(res=>{
+
+    approveTypeList.value = res.data
+  })
+}
+
+const del = (i)=>{
+  form.flowList.splice(i,1)
+}
+
+const clearDom = (i)=>{
+  console.log(i)
+}
+
+
+onMounted(()=>{
+  getDictList()
+})
+
+const router = useRouter()
+const goBack = ()=>{
+  router.push({ path: '/system/approvalConfiguration/index' })
+}
+</script>
+
+
+<style scoped lang="scss">
+.del{
+  height: 65%;
+  display: flex;
+  align-items: center;
+  color: red;
+  font-size: 13px;
+  cursor: pointer;
+}
+.bold-text {
+  width: 72px;
+  height: 15px;
+  font-family: PingFangSC-Medium;
+  font-weight: 900;
+  font-size: 18px;
+  color: #0D162A;
+  letter-spacing: 0;
+  line-height: 15px;
+}
+</style>