Commit @188a9201377e3406cdc78d3f3b6d34c5ee858c25

하석형 04-23

250423 하석형 메뉴 만족도 관리 페이지 구현, 만족도 조사 작업 중

@188a9201377e3406cdc78d3f3b6d34c5ee858c25

188a920

client/resources/api/menuDgstfn.js (added)

+++ client/resources/api/menuDgstfn.js

...	...	@@ -0,0 +1,13 @@
	1	+import apiClient from "./index";
	2	+
	3	+export const findAll = () => {
	4	+ return apiClient.get(`/admin/menuDgstfn/findAll.json`);
	5	+};
	6	+
	7	+export const findAllByMenuId = (menuDgstfn) => {
	8	+ return apiClient.post(`/admin/menuDgstfn/findAllByMenuId.json`, menuDgstfn);
	9	+};
	10	+
	11	+export const save = (menuDgstfn) => {
	12	+ return apiClient.post(`/admin/menuDgstfn/saveProc.json`, menuDgstfn);
	13	+};

188a920

client/views/layout/menuSatisfaction.vue (added)

+++ client/views/layout/menuSatisfaction.vue

...	...	@@ -0,0 +1,102 @@
	1	+<template>
	2	+ <div v-if="dgstfnExmnUseYn == 'Y'">
	3	+ <label class="form-title">{{pgNm}} 만족도 조사</label>
	4	+ <div class="check-area">
	5	+ <div class="form-check">
	6	+ <input type="radio" name="rspns" id="rspnsFive" class="mr5" v-model="menuDgstfn.rspnsFive"
	7	+ value="Y" />
	8	+ <label for="rspnsFive">매우 만족</label>
	9	+ </div>
	10	+ <div class="form-check">
	11	+ <input type="radio" name="rspns" id="rspnsFour" class="mr5" v-model="menuDgstfn.rspnsFour"
	12	+ value="Y" />
	13	+ <label for="rspnsFour">만족</label>
	14	+ </div>
	15	+ </div>
	16	+ <div class="layout">
	17	+ <label class="form-title">의견</label>
	18	+ <input
	19	+ type="text"
	20	+ class="form-control sm"
	21	+ v-model="menuDgstfn.opnn"
	22	+ placeholder="의견을 남겨주세요"
	23	+ />
	24	+ </div>
	25	+ </div>
	26	+ <div v-else>
	27	+ <label class="form-title">[만족도 조사 비활성화 상태]</label>
	28	+ </div>
	29	+</template>
	30	+
	31	+<script>
	32	+import store from "../pages/AppStore";
	33	+import { menuFindByMenu } from '../../resources/api/menu.js';
	34	+import { save } from '../../resources/api/menuDgstfn.js';
	35	+
	36	+export default {
	37	+ data() {
	38	+ return {
	39	+ mbrNm: store.state.mbrNm,
	40	+ pgNm: store.state.menu && store.state.menu.menuNm ? store.state.menu.menuNm : "홈",
	41	+ menuId: null,
	42	+
	43	+ dgstfnExmnUseYn: "N", // 메뉴 사용 여부
	44	+ // satisfaction: {}, // 만족도
	45	+ menuDgstfn: {}, // 메뉴 만족도
	46	+ }
	47	+ },
	48	+ created() {
	49	+ this.fnView(store.state.menu.menuId);
	50	+ },
	51	+ methods: {
	52	+ // 상세 조회
	53	+ async fnView(menuId) {
	54	+ try {
	55	+ const params = { menuId: menuId };
	56	+ const res = await menuFindByMenu(params);
	57	+ if (res.status == 200) {
	58	+ console.log("메뉴상태: ", res.data.data);
	59	+ this.dgstfnExmnUseYn = res.data.data.dgstfnExmnUseYn;
	60	+ }
	61	+ } catch (error) {
	62	+ alert(error.response.data.message);
	63	+ }
	64	+ },
	65	+
	66	+ // 저장
	67	+ async save() {
	68	+ try {
	69	+ const res = await save(this.menuDgstfn);
	70	+ alert(res.data.message);
	71	+ if (res.status == 200) {
	72	+ }
	73	+ } catch (error) {
	74	+ alert(error.response.data.message);
	75	+ }
	76	+ },
	77	+
	78	+ },
	79	+ watch: {
	80	+ 'pgNm'(newValue, oldValue) {
	81	+ console.log(oldValue)
	82	+ },
	83	+ '$store.state.menu'(newValue) {
	84	+ console.log("newValue : ", newValue);
	85	+ this.pgNm = newValue.menuNm
	86	+ this.menuId = newValue.menuId
	87	+ this.fnView(this.menuId);
	88	+ },
	89	+
	90	+ },
	91	+ computed: {
	92	+
	93	+ pgNm() {
	94	+ return store.state.menu && store.state.menu.menuNm ? store.state.menu.menuNm : "홈";
	95	+ }
	96	+
	97	+ },
	98	+ mounted() {
	99	+
	100	+ }
	101	+}
	102	+</script>(파일 끝에 줄바꿈 문자 없음)

91600a8

188a920

client/views/pages/App.vue

--- client/views/pages/App.vue

+++ client/views/pages/App.vue


     <AdminMenu />
     <main class="main-wrap">
         <div :class="{'content-wrap': true, 'main': this.$route.path === this.$filters.ctxPath('/adm/main.page')}">
+          <!-- <MenuSatisfaction/> -->
           <router-view />
         </div>
     </main>

     <main class="main-wrap">
       <Breadcrumb v-if="$route.path !== this.$filters.ctxPath('/adm/main.page') && $route.path !== this.$filters.ctxPath('/main.page')" />
       <router-view />
+      <!-- <MenuSatisfaction/> -->
     </main>
   </div>
 </template>

 import AdminHeader from "../layout/AdminHeader.vue";
 import AdminMenu from "../layout/AdminMenu.vue";
 import Breadcrumb from "../component/Breadcrumb/Breadcrumb.vue";
+import MenuSatisfaction from "../layout/menuSatisfaction.vue";
 const App = {
   data: () => {
     return {

     'AdminHeader': AdminHeader,
     'AdminMenu': AdminMenu,
     'Breadcrumb' : Breadcrumb,
+    'MenuSatisfaction': MenuSatisfaction,
   },
   mounted() {},
 };

91600a8

188a920

client/views/pages/adm/menuManagement/menuSatisfactionManagement/MenuSatisfactionSelectList.vue

--- client/views/pages/adm/menuManagement/menuSatisfactionManagement/MenuSatisfactionSelectList.vue

+++ client/views/pages/adm/menuManagement/menuSatisfactionManagement/MenuSatisfactionSelectList.vue


             :thead="thead"
             :tbody="tbody"
           >
-            <template v-slot:button>
+            <template v-slot:button="{ row, idx }">
               <button
                 class="btn btn-chip-outline sm main ico-view "
-                @click.stop="modalOpen"
+                @click.stop="modalOpen(row, idx)"
                 v-if="pageAuth.inqAuthrt == 'Y'"
               >
                 보기

       <ListTable
         :colgroup="colgroup2"
         :thead="thead2"
-        :tbody="tbody"
+        :tbody="stfndgTbody"
         :className="'data'"
       />
     </div>

 import PaginationButton from "../../../../component/pagination/PaginationButton.vue";
 import Modal from "../../../../component/modal/Modal.vue";
 import { defaultSearchParams } from "../../../../../resources/js/defaultSearchParams";
+import { findAll, findAllByMenuId } from "../../../../../resources/api/menuDgstfn";
 
 export default {
   components: {

       // 페이지 권한 객체
       pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
       search: { ...defaultSearchParams },
-
       satisfaction: false,
       colgroup: ["30%", "10%", "10%", "10%", "10%", "10%", "10%", "10%"],
-      colgroup2: ["13%", "13%", "13%", "13%", "13%", "13%", "22%"],
+      colgroup2: ["12%", "12%", "12%", "12%", "12%", "40%"],
       thead: [
         "메뉴명",
         "매우만족",

         "보통",
         "불만족",
         "매우 불만족",
-        "점수 합계",
-        "의견",
+        "평균 점수",
+        "상세보기",
       ],
       thead2: [
         "매우만족",

         "보통",
         "불만족",
         "매우 불만족",
-        "합계",
         "의견",
       ],
-      tbody: [
-        {
-          id: 1,
-          1: "a기업",
-          2: "홍길동",
-          3: "정상",
-          4: "정상",
-          5: "정상",
-          6: "정상",
-        },
-        {
-          id: 2,
-          1: "a기업",
-          2: "홍길동",
-          3: "정상",
-          4: "정상",
-          5: "정상",
-          6: "정상",
-        },
-        {
-          id: 3,
-          1: "a기업",
-          2: "홍길동",
-          3: "정상",
-          4: "정상",
-          5: "정상",
-          6: "정상",
-        },
-        {
-          id: 4,
-          1: "a기업",
-          2: "홍길동",
-          3: "정상",
-          4: "정상",
-          5: "정상",
-          6: "정상",
-        },
-        {
-          id: 5,
-          1: "a기업",
-          2: "홍길동",
-          3: "정상",
-          4: "정상",
-          5: "정상",
-          6: "정상",
-        },
-      ],
+      tbody: [],
+      stfndgTbody: [], // 만족도 목록
+      menuList: [], // 메뉴 목록
+      menuStfndgList: [], // 메뉴별 만족도 목록
     };
   },
-  created() {},
+  created() {
+    this.findAll();
+  },
   methods: {
-    modalOpen: function () {
+    modalOpen: function (row, idx) {
+      this.findAllByMenuId(this.menuList[idx]);
       this.satisfaction = true;
     },
     modalClose: function () {
       this.satisfaction = false;
     },
+
+    // 목록 조회
+    async findAll() {
+      try {
+        const res = await findAll();
+        if (res.status == 200) {
+          console.log("res.data.data : ", res.data.data);
+          this.menuList = res.data.data; // 메뉴 목록
+          this.makeTbody();
+        }
+      } catch (error) {
+        alert(error.response.data.message);
+      }
+    },
+
+    // 메뉴별 만족도 조회
+    async findAllByMenuId(menu) {
+      try {
+        const params = { menuId: menu.menuId };
+        const res = await findAllByMenuId(params);
+        if (res.status == 200) {
+          this.menuStfndgList = res.data.data; // 메뉴별 만족도 목록
+          console.log("this.menuStfndgList : ", this.menuStfndgList);
+          this.makeStfndgTbody();
+        }
+      } catch (error) {
+        alert(error.response.data.message);
+      }
+    },
+
+    // tbody 생성
+    makeTbody() {
+      this.tbody = [];
+      this.tbody = this.menuList.map((menu) => ({
+        menuNm: menu.menuNm, // 메뉴명
+        rspnsFiveCnt: menu.rspnsFiveCnt, // 매우만족
+        rspnsFourCnt: menu.rspnsFourCnt, // 만족
+        rspnsThreeCnt: menu.rspnsThreeCnt, // 보통
+        rspnsTwoCnt: menu.rspnsTwoCnt, // 불만족
+        rspnsOneCnt: menu.rspnsOneCnt, // 매우불만족
+        avrgRspnsScore: menu.avrgRspnsScore, // 점수 평균
+      }));
+    },
+
+    // 만족도 tbody 생성
+    makeStfndgTbody() {
+      this.stfndgTbody = [];
+      this.stfndgTbody = this.menuStfndgList.map((menuStfndg) => ({
+        // regIp: menuStfndg.regIp, // 등록IP
+        rspnsFive: menuStfndg.rspnsFive, // 매우만족
+        rspnsFour: menuStfndg.rspnsFour, // 만족
+        rspnsThree: menuStfndg.rspnsThree, // 보통
+        rspnsTwo: menuStfndg.rspnsTwo, // 불만족
+        rspnsOne: menuStfndg.rspnsOne, // 매우불만족
+        opnn: menuStfndg.opnn, // 의견
+      }));
+    },
   },
   watch: {},
   computed: {},

Add a comment

Open 0
Closed 0

List

...	...	@@ -4,6 +4,7 @@
4	4	<AdminMenu />
5	5	<main class="main-wrap">
6	6	<div :class="{'content-wrap': true, 'main': this.$route.path === this.$filters.ctxPath('/adm/main.page')}">
	7	+ <!-- <MenuSatisfaction/> -->
7	8	<router-view />
8	9	</div>
9	10	</main>
...	...	@@ -13,6 +14,7 @@
13	14	<main class="main-wrap">
14	15	<Breadcrumb v-if="$route.path !== this.$filters.ctxPath('/adm/main.page') && $route.path !== this.$filters.ctxPath('/main.page')" />
15	16	<router-view />
	17	+ <!-- <MenuSatisfaction/> -->
16	18	</main>
17	19	</div>
18	20	</template>
...	...	@@ -22,6 +24,7 @@
22	24	import AdminHeader from "../layout/AdminHeader.vue";
23	25	import AdminMenu from "../layout/AdminMenu.vue";
24	26	import Breadcrumb from "../component/Breadcrumb/Breadcrumb.vue";
	27	+import MenuSatisfaction from "../layout/menuSatisfaction.vue";
25	28	const App = {
26	29	data: () => {
27	30	return {
...	...	@@ -51,6 +54,7 @@
51	54	'AdminHeader': AdminHeader,
52	55	'AdminMenu': AdminMenu,
53	56	'Breadcrumb' : Breadcrumb,
	57	+ 'MenuSatisfaction': MenuSatisfaction,
54	58	},
55	59	mounted() {},
56	60	};

...	...	@@ -9,10 +9,10 @@
9	9	:thead="thead"
10	10	:tbody="tbody"
11	11	>
12		- <template v-slot:button>
	12	+ <template v-slot:button="{ row, idx }">
13	13	<button
14	14	class="btn btn-chip-outline sm main ico-view "
15		- @click.stop="modalOpen"
	15	+ @click.stop="modalOpen(row, idx)"
16	16	v-if="pageAuth.inqAuthrt == 'Y'"
17	17	>
18	18	보기
...	...	@@ -45,7 +45,7 @@
45	45	<ListTable
46	46	:colgroup="colgroup2"
47	47	:thead="thead2"
48		- :tbody="tbody"
	48	+ :tbody="stfndgTbody"
49	49	:className="'data'"
50	50	/>
51	51	</div>
...	...	@@ -57,6 +57,7 @@
57	57	import PaginationButton from "../../../../component/pagination/PaginationButton.vue";
58	58	import Modal from "../../../../component/modal/Modal.vue";
59	59	import { defaultSearchParams } from "../../../../../resources/js/defaultSearchParams";
	60	+import { findAll, findAllByMenuId } from "../../../../../resources/api/menuDgstfn";
60	61
61	62	export default {
62	63	components: {
...	...	@@ -69,10 +70,9 @@
69	70	// 페이지 권한 객체
70	71	pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
71	72	search: { ...defaultSearchParams },
72		-
73	73	satisfaction: false,
74	74	colgroup: ["30%", "10%", "10%", "10%", "10%", "10%", "10%", "10%"],
75		- colgroup2: ["13%", "13%", "13%", "13%", "13%", "13%", "22%"],
	75	+ colgroup2: ["12%", "12%", "12%", "12%", "12%", "40%"],
76	76	thead: [
77	77	"메뉴명",
78	78	"매우만족",
...	...	@@ -80,8 +80,8 @@
80	80	"보통",
81	81	"불만족",
82	82	"매우 불만족",
83		- "점수 합계",
84		- "의견",
	83	+ "평균 점수",
	84	+ "상세보기",
85	85	],
86	86	thead2: [
87	87	"매우만족",
...	...	@@ -89,66 +89,82 @@
89	89	"보통",
90	90	"불만족",
91	91	"매우 불만족",
92		- "합계",
93	92	"의견",
94	93	],
95		- tbody: [
96		- {
97		- id: 1,
98		- 1: "a기업",
99		- 2: "홍길동",
100		- 3: "정상",
101		- 4: "정상",
102		- 5: "정상",
103		- 6: "정상",
104		- },
105		- {
106		- id: 2,
107		- 1: "a기업",
108		- 2: "홍길동",
109		- 3: "정상",
110		- 4: "정상",
111		- 5: "정상",
112		- 6: "정상",
113		- },
114		- {
115		- id: 3,
116		- 1: "a기업",
117		- 2: "홍길동",
118		- 3: "정상",
119		- 4: "정상",
120		- 5: "정상",
121		- 6: "정상",
122		- },
123		- {
124		- id: 4,
125		- 1: "a기업",
126		- 2: "홍길동",
127		- 3: "정상",
128		- 4: "정상",
129		- 5: "정상",
130		- 6: "정상",
131		- },
132		- {
133		- id: 5,
134		- 1: "a기업",
135		- 2: "홍길동",
136		- 3: "정상",
137		- 4: "정상",
138		- 5: "정상",
139		- 6: "정상",
140		- },
141		- ],
	94	+ tbody: [],
	95	+ stfndgTbody: [], // 만족도 목록
	96	+ menuList: [], // 메뉴 목록
	97	+ menuStfndgList: [], // 메뉴별 만족도 목록
142	98	};
143	99	},
144		- created() {},
	100	+ created() {
	101	+ this.findAll();
	102	+ },
145	103	methods: {
146		- modalOpen: function () {
	104	+ modalOpen: function (row, idx) {
	105	+ this.findAllByMenuId(this.menuList[idx]);
147	106	this.satisfaction = true;
148	107	},
149	108	modalClose: function () {
150	109	this.satisfaction = false;
151	110	},
	111	+
	112	+ // 목록 조회
	113	+ async findAll() {
	114	+ try {
	115	+ const res = await findAll();
	116	+ if (res.status == 200) {
	117	+ console.log("res.data.data : ", res.data.data);
	118	+ this.menuList = res.data.data; // 메뉴 목록
	119	+ this.makeTbody();
	120	+ }
	121	+ } catch (error) {
	122	+ alert(error.response.data.message);
	123	+ }
	124	+ },
	125	+
	126	+ // 메뉴별 만족도 조회
	127	+ async findAllByMenuId(menu) {
	128	+ try {
	129	+ const params = { menuId: menu.menuId };
	130	+ const res = await findAllByMenuId(params);
	131	+ if (res.status == 200) {
	132	+ this.menuStfndgList = res.data.data; // 메뉴별 만족도 목록
	133	+ console.log("this.menuStfndgList : ", this.menuStfndgList);
	134	+ this.makeStfndgTbody();
	135	+ }
	136	+ } catch (error) {
	137	+ alert(error.response.data.message);
	138	+ }
	139	+ },
	140	+
	141	+ // tbody 생성
	142	+ makeTbody() {
	143	+ this.tbody = [];
	144	+ this.tbody = this.menuList.map((menu) => ({
	145	+ menuNm: menu.menuNm, // 메뉴명
	146	+ rspnsFiveCnt: menu.rspnsFiveCnt, // 매우만족
	147	+ rspnsFourCnt: menu.rspnsFourCnt, // 만족
	148	+ rspnsThreeCnt: menu.rspnsThreeCnt, // 보통
	149	+ rspnsTwoCnt: menu.rspnsTwoCnt, // 불만족
	150	+ rspnsOneCnt: menu.rspnsOneCnt, // 매우불만족
	151	+ avrgRspnsScore: menu.avrgRspnsScore, // 점수 평균
	152	+ }));
	153	+ },
	154	+
	155	+ // 만족도 tbody 생성
	156	+ makeStfndgTbody() {
	157	+ this.stfndgTbody = [];
	158	+ this.stfndgTbody = this.menuStfndgList.map((menuStfndg) => ({
	159	+ // regIp: menuStfndg.regIp, // 등록IP
	160	+ rspnsFive: menuStfndg.rspnsFive, // 매우만족
	161	+ rspnsFour: menuStfndg.rspnsFour, // 만족
	162	+ rspnsThree: menuStfndg.rspnsThree, // 보통
	163	+ rspnsTwo: menuStfndg.rspnsTwo, // 불만족
	164	+ rspnsOne: menuStfndg.rspnsOne, // 매우불만족
	165	+ opnn: menuStfndg.opnn, // 의견
	166	+ }));
	167	+ },
152	168	},
153	169	watch: {},
154	170	computed: {},

Delete comment