init 分页

src/components/mPage.vue

@@ -0,0 +1,46 @@
+<script setup>
+const props = defineProps({
+  page_no: {
+    type: Number,
+    default: 1,
+  },
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+  pagercount: {
+    type: Number,
+    default: 7,
+  },
+});
+
+const emit = defineEmits(["handleCurrentChange", "handleSizeChange"]);
+
+/* 页码改变 */
+const handleCurrentChange = (page) => {
+  emit("handleCurrentChange", page);
+};
+/* 每页条数改变 */
+const handleSizeChange = (size) => {
+  emit("handleSizeChange", page);
+};
+</script>
+
+<template>
+  <el-pagination
+    layout="total,prev,pager,next,jumper"
+    background
+    :current-page="props.page_no"
+    @current-change="handleCurrentChange"
+    :page-size="props.pageSize"
+    @size-change="handleSizeChange"
+    :total="props.total"
+    :pager-count="props.pagercount"
+    style="float: right"
+  >
+  </el-pagination>
+</template>

src/views/rai_manage/components/interviewDia.vue

@@ -11,38 +11,39 @@ const props = defineProps({
   applyId: Number,
 });
 
+const emit = defineEmits(['cancel','saveOver'])
 const datetime = ref("");
 
 /* 保存 */
 const saveHandle = () => {
-  if (this.title === "update" || this.title === "cancel") {
-    if (this.status == "待邀请") {
-      this.datetime && this.updateApply();
-      !this.datetime && ElMessage.warning("访谈时间不能为空");
+  if (props.title === "update" || props.title === "cancel") {
+    if (props.status == "待邀请") {
+      datetime.value && this.updateApply();
+      !datetime.value && ElMessage.warning("访谈时间不能为空");
     } else {
-      this.updateApply();
+      updateApply();
     }
   }
-  this.title === "deal" && this.$emit("saveOver");
+  props.title === "deal" && emit("saveOver");
 };
 /* 取消 */
 const cancelHandle = () => {
-  this.datetime = "";
-  this.$emit("cancel");
+  datetime.value = "";
+  emit("cancel");
 };
 
 /* 更新/取消 */
 const updateApply = () => {
   raiInterface
     .cancelInterview({
-      HandleType: this.title == "update" ? 1 : 2,
-      InterviewApplyId: Number(this.applyId),
-      InterviewTime: this.title == "update" && this.status == "待邀请" ? this.datetime : "",
+      HandleType: props.title == "update" ? 1 : 2,
+      InterviewApplyId: Number(props.applyId),
+      InterviewTime: props.title == "update" && props.status == "待邀请" ? datetime.value : "",
     })
     .then((res) => {
       if (res.Ret === 200) {
         ElMessage.success(res.Msg);
-        this.$emit("over");
+        emit("over");
       }
     });
 };
@@ -62,7 +63,7 @@ const lookDetail = (id) => {
 <template>
   <el-dialog
     draggable
-    v-model="isShowDia"
+    v-model="props.isShowDia"
     :close-on-click-modal="false"
     :modal-append-to-body="false"
     :show-close="false"

src/views/rai_manage/components/mapDialog.vue

@@ -14,7 +14,7 @@ const add_name = ref("");
 
 /* 保存 */
 const saveHandle = () => {
-  switch (title) {
+  switch (props.title) {
     case "add":
       addNode();
       break;
@@ -29,11 +29,11 @@ const saveHandle = () => {
 
 /* 新增节点 */
 const addNode = () => {
-  if (add_name) {
+  if (add_name.value) {
     raiInterface
       .addNode({
         IndustryMapId: props.nodeData.id,
-        IndustryMapName: add_name,
+        IndustryMapName: add_name.value,
         Level: props.nodeData.level,
       })
       .then((res) => {

src/views/rai_manage/cygxManage/adviceList.vue

@@ -1,191 +1,185 @@
-<template>
-	<div class="adviceList_container">
-		<div class="adviceList_top">
-			<el-input
-				placeholder="姓名/手机号"
-				v-model="search_txt"
-				clearable
-				style="maxWidth:500px">
-				<i slot="prefix" class="el-input__icon el-icon-search"></i>
-			</el-input>
-		</div>
-		<div class="adviceList_cont">
-			<el-table
-				ref="userTable"
-				:data="tableData"
-				v-loading="isShowloadding"
-				element-loading-text="数据加载中..."
-				border>
-					<el-table-column
-					prop="UserRealName"
-					label="姓名"
-					align="center">
-						<template slot-scope="scope"> <span>{{scope.row.UserRealName}}</span></template>
-					</el-table-column>
-					<el-table-column
-					prop="Mobile"
-					label="手机号"
-					align="center">
-						<template slot-scope="scope"> <span>{{scope.row.Mobile}}</span></template>
-					</el-table-column>
-					<el-table-column
-					prop="CompanyName"
-					label="客户名称"
-					align="center">
-						<template slot-scope="scope"> <span style="color:#409EFF;cursor:pointer;" @click="$router.push({
-						path:'/RaiDetail',
-						query:{
-							id:scope.row.CompanyId
-						}})">{{scope.row.CompanyName}}</span></template>
-					</el-table-column>
-					<el-table-column
-					prop="SalesRealName"
-					label="所属销售"
-					align="center">
-						<template slot-scope="scope"> <span>{{scope.row.SalesRealName}}</span> </template>
-					</el-table-column>
-					<el-table-column
-					prop="Advice"
-					label="优化建议"
-					align="center"
-					min-width="300px">
-						<template slot-scope="scope"> <span>{{scope.row.Advice}}</span> </template>
-					</el-table-column>
-					<el-table-column
-					prop="CreateTime"
-					label="创建时间"
-					min-width="130px"
-					align="center">
-						<template slot-scope="scope"> <span>{{scope.row.CreateTime}}</span> </template>
-					</el-table-column>
-					<el-table-column label="操作" align="center" min-width="110">
-						<template slot-scope="scope">
-							<span class="editsty" v-if="scope.row.AdviceImgUrl" @click="previewImg(scope.row)">查看图片</span>
-						</template>
-					</el-table-column>
-					<div slot="empty" style="lineHeight:44px;margin:60px 0;color:#999;">
-						<img src="~@/assets/img/cus_m/nodata.png" alt="" style="display:block;width:160px;height:128px;margin: auto;">
-						<span>暂无数据</span>
-					</div>
-			</el-table>
-			<el-col :span="24" class="toolbar">
-				<m-page 
-				:total="total"
-				:page_no="page_no"
-				@handleCurrentChange="handleCurrentChange"/>
-			</el-col>
-		</div>
-		<!-- 图片预览 -->
-		<el-image-viewer 
-		v-if="showViewer" 
-		:on-close="closeViewer" 
-		:url-list="reviewList" />
-	</div>
-</template>
-
 <script>
-import { raiInterface } from '@/api/api.js'
+import { defineComponent } from "vue";
+export default defineComponent({
+  beforeRouteEnter(to, from, next) {
+    if (from.path != "/customDetail") {
+      sessionStorage.removeItem("adviceListBack");
+    }
+    next();
+  },
+});
+</script>
+
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import { raiInterface } from "@/api/api.js";
 import mPage from '@/components/mPage.vue'
-import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
-export default {
-	name:'',
-	components: {mPage,ElImageViewer},
-	watch:{
-		search_txt(newval) {
-			this.page_no = 1;
-			this.getTableData();
-		}
-	},
-	data () {
-		return {
-			tableData:[],
-			total:0,
-			page_no:sessionStorage.getItem('adviceListBack')?JSON.parse(sessionStorage.getItem('adviceListBack')).page_no:1,
-			pageSize:10,
-			search_txt:'',
-			showViewer:false,
-			reviewList:[]
-		};
-	},
-	/* 页面跳转前记录参数 */
-	beforeRouteLeave(to, form, next) {
-		let backData = {
-			page_no:this.page_no,
-			keyword:this.search_txt
-		}
-		sessionStorage.setItem('adviceListBack',JSON.stringify(backData))
-		next()
-	},
-	/* 页面进入前是否清除参数 */
-	beforeRouteEnter(to,from,next) {
-		if(from.path!='/customDetail') {
-			sessionStorage.removeItem('adviceListBack')
-		}
-		next()
-	},
-	methods: {
-		/* 获取表格数据 */
-		getTableData() {
-			raiInterface.adviceList({
-				PageSize:this.pageSize,
-				CurrentIndex:this.page_no,
-				KeyWord:this.search_txt
-			}).then(res => {
-				if(res.Ret === 200) {
-					this.tableData = res.Data.List || [];
-					this.total = res.Data.Paging.Totals;
-				}
-			})
-		},
-		/* 页码改变 */
-		handleCurrentChange(page) {
-			this.page_no = page;
-			this.getTableData();
-		},
-		/* 预览名片 */
-		previewImg(item) {
-			this.showViewer = true;
-			this.reviewList = item.AdviceImgUrl.split('#');
-		},
-		/* 关闭预览 */
-		closeViewer() {
-			this.reviewList = [];
-			this.showViewer = false;
-		},
-	},
-	created() {
-	},
-	mounted() {
-		if(sessionStorage.getItem('adviceListBack')) {
-			let backData = JSON.parse(sessionStorage.getItem('adviceListBack'));
-			this.search_txt = backData.keyword;
-			this.page_no = backData.page_no;
-		}
-		this.getTableData();
-	},
-}
+import { onBeforeRouteLeave, useRouter } from "vue-router";
+import { Search } from "@element-plus/icons-vue";
+
+const router = useRouter();
+
+const tableData = ref([]);
+const total = ref(0);
+const page_no = ref(sessionStorage.getItem("adviceListBack") ? JSON.parse(sessionStorage.getItem("adviceListBack")).page_no : 1);
+const pageSize = ref(10);
+const search_txt = ref("");
+const showViewer = ref(false);
+const reviewList = ref([]);
+
+watch(
+  () => search_txt.value,
+  () => {
+    page_no.value = 1;
+    getTableData();
+  }
+);
+
+
+/* 获取表格数据 */
+const getTableData = () => {
+  raiInterface
+    .adviceList({
+      PageSize: pageSize.value,
+      CurrentIndex: page_no.value,
+      KeyWord: search_txt.value,
+    })
+    .then((res) => {
+      if (res.Ret === 200) {
+        tableData.value = res.Data.List || [];
+        total.value = res.Data.Paging.Totals;
+      }
+    });
+};
+/* 页码改变 */
+const handleCurrentChange = (page) => {
+  page_no.value = page;
+  getTableData();
+};
+/* 预览名片 */
+const previewImg = (item) => {
+  showViewer.value = true;
+  reviewList.value = item.AdviceImgUrl.split("#");
+};
+
+/* 关闭预览 */
+const closeViewer = () => {
+  reviewList.value = [];
+  showViewer.value = false;
+};
+onMounted(() => {
+  if (sessionStorage.getItem("adviceListBack")) {
+    let backData = JSON.parse(sessionStorage.getItem("adviceListBack"));
+    search_txt.value = backData.keyword;
+    page_no.value = backData.page_no;
+  }
+  getTableData();
+});
+
+onBeforeRouteLeave((to, form, next) => {
+  let backData = {
+    page_no: page_no.value,
+    keyword: search_txt.value,
+  };
+  sessionStorage.setItem("adviceListBack", JSON.stringify(backData));
+  next();
+});
 </script>
-<style lang='scss' scoped>
+
+<template>
+  <div class="adviceList_container">
+    <div class="adviceList_top">
+      <el-input placeholder="姓名/手机号" v-model="search_txt" clearable style="max-width: 500px">
+        <template #prefix>
+          <el-icon class="el-input__icon"><search /></el-icon>
+        </template>
+      </el-input>
+    </div>
+    <div class="adviceList_cont">
+      <el-table ref="userTable" :data="tableData" v-loading="isShowloadding" element-loading-text="数据加载中..." border>
+        <el-table-column prop="UserRealName" label="姓名" align="center">
+          <template #default="scope">
+            <span>{{ scope.row.UserRealName }}</span></template
+          >
+        </el-table-column>
+        <el-table-column prop="Mobile" label="手机号" align="center">
+          <template #default="scope">
+            <span>{{ scope.row.Mobile }}</span></template
+          >
+        </el-table-column>
+        <el-table-column prop="CompanyName" label="客户名称" align="center">
+          <template #default="scope">
+            <span
+              style="color: #409eff; cursor: pointer"
+              @click="
+                router.push({
+                  path: '/RaiDetail',
+                  query: {
+                    id: scope.row.CompanyId,
+                  },
+                })
+              "
+              >{{ scope.row.CompanyName }}</span
+            ></template
+          >
+        </el-table-column>
+        <el-table-column prop="SalesRealName" label="所属销售" align="center">
+          <template #default="scope">
+            <span>{{ scope.row.SalesRealName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="Advice" label="优化建议" align="center" min-width="300px">
+          <template #default="scope">
+            <span>{{ scope.row.Advice }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="CreateTime" label="创建时间" min-width="130px" align="center">
+          <template #default="scope">
+            <span>{{ scope.row.CreateTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" min-width="110">
+          <template #default="scope">
+            <span class="editsty" v-if="scope.row.AdviceImgUrl" @click="previewImg(scope.row)">查看图片</span>
+          </template>
+        </el-table-column>
+        <template #empty>
+          <div style="line-height: 44px; margin: 60px 0; color: #999">
+            <img src="~@/assets/img/cus_m/nodata.png" alt="" style="display: block; width: 160px; height: 128px; margin: auto" />
+            <span>暂无数据</span>
+          </div>
+        </template>
+      </el-table>
+      <el-col :span="24" class="toolbar">
+        <m-page :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
+      </el-col>
+    </div>
+    <!-- 图片预览 -->
+    <el-image-viewer v-if="showViewer" @close="closeViewer" :url-list="reviewList" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
 .adviceList_container {
-	.adviceList_top {
-		display: flex;
-		justify-content:flex-end;
-		align-items: center;
-		border: 1px solid #ECECEC;
-		padding: 20px 30px;
-		background: #fff;
-		border-radius: 4px;
-		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
-	}
-	.adviceList_cont {
-		min-height: calc(100vh - 320px);
-		padding: 20px 30px 80px;
-		background: #fff;
-		margin-top: 20px;
-		position: relative;
-		border: 1px solid #ECECEC;
-		border-radius: 4px;
-		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
-	}
+  .adviceList_top {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border: 1px solid #ececec;
+    padding: 20px 30px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+  }
+  .adviceList_cont {
+    min-height: calc(100vh - 320px);
+    padding: 20px 30px 80px;
+    background: #fff;
+    margin-top: 20px;
+    position: relative;
+    border: 1px solid #ececec;
+    border-radius: 4px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+  }
 }
-</style>
+</style>

src/views/rai_manage/cygxManage/interviewList.vue

@@ -15,18 +15,10 @@ import { ref, watch, onMounted } from "vue";
 import { raiInterface } from "@/api/api.js";
 import { onBeforeRouteLeave, useRouter } from "vue-router";
 import { Search } from "@element-plus/icons-vue";
-// import mPage from "@/components/mPage.vue";
-// import intervewDia from "../components/interviewDia.vue";
+import mPage from "@/components/mPage.vue";
+import intervewDia from "../components/interviewDia.vue";
 
 const router = useRouter();
-onBeforeRouteLeave((to, from, next) => {
-  let backData = {
-    page_no: this.page_no,
-    keyword: this.search_txt,
-  };
-  sessionStorage.setItem("interviewListBack", JSON.stringify(backData));
-  next();
-});
 
 const total = ref(0);
 const page_no = ref(sessionStorage.getItem("interviewListBack") ? JSON.parse(sessionStorage.getItem("interviewListBack")).page_no : 1);
@@ -91,6 +83,15 @@ onMounted(() => {
   }
   getTableData();
 });
+
+onBeforeRouteLeave((to, from, next) => {
+  let backData = {
+    page_no: page_no.value,
+    keyword: search_txt.value,
+  };
+  sessionStorage.setItem("interviewListBack", JSON.stringify(backData));
+  next();
+});
 </script>
 
 <template>
@@ -147,10 +148,10 @@ onMounted(() => {
         </el-table-column>
         <el-table-column label="操作" align="center" min-width="110">
           <template #default="scope">
-            <span class="editsty" style="marginright: 10px" @click="dialogHandle(scope.row, 'detail')">查看详情</span>
+            <span class="editsty" style="margin-right: 10px" @click="dialogHandle(scope.row, 'detail')">查看详情</span>
             <template v-if="scope.row.Status === '待邀请' || scope.row.Status === '待访谈'">
-              <span class="editsty" style="marginright: 10px" @click="dialogHandle(scope.row, 'update')">状态更新</span>
-              <span class="editsty" style="marginright: 10px" @click="dialogHandle(scope.row, 'cancel')">取消</span>
+              <span class="editsty" style="margin-right: 10px" @click="dialogHandle(scope.row, 'update')">状态更新</span>
+              <span class="editsty"  @click="dialogHandle(scope.row, 'cancel')">取消</span>
             </template>
           </template>
         </el-table-column>
@@ -162,11 +163,11 @@ onMounted(() => {
         </template>
       </el-table>
       <el-col :span="24" class="toolbar">
-        <!-- <m-page :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" /> -->
+        <m-page :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
       </el-col>
     </div>
     <!-- 弹窗操作 -->
-    <!-- <intervewDia :isShowDia="isShowDia" :title="diaTit" :status="status" :itemObj="itemObj" :applyId="applyId" @cancel="isShowDia = false" @over="diaOverHandle" /> -->
+    <intervewDia :isShowDia="isShowDia" :title="diaTit" :status="status" :itemObj="itemObj" :applyId="applyId" @cancel="isShowDia = false" @over="diaOverHandle" />
   </div>
 </template>