深加工新需求
This commit is contained in:
		
							
								
								
									
										12
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						
									
										12
									
								
								.env.dev
									
									
									
									
									
								
							@@ -1,7 +1,7 @@
 | 
			
		||||
###
 | 
			
		||||
 # @Author: Do not edit
 | 
			
		||||
 # @Date: 2023-08-29 09:40:39
 | 
			
		||||
 # @LastEditTime: 2024-04-09 08:44:55
 | 
			
		||||
 # @LastEditTime: 2024-04-10 08:26:13
 | 
			
		||||
 # @LastEditors: zhp
 | 
			
		||||
 # @Description:
 | 
			
		||||
###
 | 
			
		||||
@@ -20,14 +20,16 @@ VUE_APP_TITLE = MES系统
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.4.173:9001'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.104:48082'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 | 
			
		||||
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.47:48082'
 | 
			
		||||
VUE_APP_BASE_API = 'http://192.168.1.78:48082'
 | 
			
		||||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
 | 
			
		||||
# socket地址
 | 
			
		||||
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
 | 
			
		||||
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
 | 
			
		||||
# VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
 | 
			
		||||
# VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
 | 
			
		||||
VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
 | 
			
		||||
VUE_APP_Socket_Dcs_API = 'ws://192.168.0.33:8080'
 | 
			
		||||
 | 
			
		||||
# 积木报表指向地址
 | 
			
		||||
VUE_APP_JIMU_API = 'http://10.70.2.22:8080'
 | 
			
		||||
 
 | 
			
		||||
@@ -2,16 +2,16 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2021-07-19 15:18:30
 | 
			
		||||
 * @LastEditors: zhp
 | 
			
		||||
 * @LastEditTime: 2024-04-03 17:14:03
 | 
			
		||||
 * @LastEditTime: 2024-04-10 16:10:11
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
  <div id="container" ref="container" class="visual-container" :style="styles">
 | 
			
		||||
    <el-row class="container-title" :style="{
 | 
			
		||||
				height: 88 + 'px',
 | 
			
		||||
				lineHeight: 88 + 'px',
 | 
			
		||||
				fontSize: 31 + 'px',
 | 
			
		||||
			}">
 | 
			
		||||
    	height: 88 + 'px',
 | 
			
		||||
    	lineHeight: 88 + 'px',
 | 
			
		||||
    	fontSize: 31 + 'px',
 | 
			
		||||
    }">
 | 
			
		||||
      <img src="../../assets/img/logo.png" style="width: 1.1em; position: relative; top: 0.22em" alt="" />
 | 
			
		||||
      许昌安彩深加工看板
 | 
			
		||||
      <h3 class="unit">单位:河南汇融数字科技有限公司</h3>
 | 
			
		||||
@@ -39,10 +39,23 @@
 | 
			
		||||
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
 | 
			
		||||
          <base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'eqMonitoring'">
 | 
			
		||||
            <div class="order" style="width: 100%; overflow: hidden scroll; height: 350px">
 | 
			
		||||
              <el-row v-for="op in orderList" :key="op.id" style="margin-bottom: .5em">
 | 
			
		||||
              <el-row v-for="op in orderList" :key="op.id" style="margin-bottom: .5em;overflow: hidden;">
 | 
			
		||||
                <!-- <el-col :span="12"> -->
 | 
			
		||||
 | 
			
		||||
                <p class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</p>
 | 
			
		||||
                <!-- <div style="height: 34px;"> -->
 | 
			
		||||
                <span class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</span>
 | 
			
		||||
                <el-divider class="split" v-if="op.specifications" direction="vertical"></el-divider>
 | 
			
		||||
                <!-- <span v-if="op.size" class="split"></span> -->
 | 
			
		||||
                <span v-if="op.specifications" class="orderSize" style="font-size: 14px;opacity: calc(.6);">{{
 | 
			
		||||
                op.specifications }}</span>
 | 
			
		||||
                <el-divider class="split" v-if="op.planQuantity" direction="vertical"></el-divider>
 | 
			
		||||
                <span v-if="op.planQuantity" class="orderPlan" style="font-size: 14px;opacity: calc(.6);">{{
 | 
			
		||||
                op.planQuantity }}</span>
 | 
			
		||||
                <span v-if="op.actualQuantity" class="orderFinish"
 | 
			
		||||
                  style="font-size: 14px;opacity: calc(.6);margin-left: 130px;">{{
 | 
			
		||||
                  op.actualQuantity
 | 
			
		||||
                  }}</span>
 | 
			
		||||
                <el-divider class="split" v-if="op.actualQuantity" direction="vertical"></el-divider>
 | 
			
		||||
                <!-- </div> -->
 | 
			
		||||
                <el-progress style="width: 620px;" text-color="rgba(255, 255, 255, .6)" :stroke-width="10"
 | 
			
		||||
                  define-back-color="rgba(32, 57, 96, 1)" :percentage="op.progressRate" class="custom-progress-bar" />
 | 
			
		||||
              </el-row>
 | 
			
		||||
@@ -67,7 +80,7 @@
 | 
			
		||||
        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
 | 
			
		||||
          <base-container :show-time="true" :no-content-padding="true" :height="318 + 338 + 16" :size="'eqStatus'"
 | 
			
		||||
            :title="'产线产量及良品率'" :title-icon="'productLine'">
 | 
			
		||||
            <div  class="myLegend">
 | 
			
		||||
            <div class="myLegend">
 | 
			
		||||
              <div class=" barCircleLegend"></div>
 | 
			
		||||
              <div class=" barCircle"></div>
 | 
			
		||||
              <h4 class="barText">产线良品率</h4>
 | 
			
		||||
@@ -364,42 +377,66 @@ export default {
 | 
			
		||||
			{
 | 
			
		||||
				id: '1',
 | 
			
		||||
				name: '测试工单',
 | 
			
		||||
				progressRate: 0.933333,
 | 
			
		||||
        progressRate: 0.933333,
 | 
			
		||||
        specifications: '1100*5554*22',
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish:111,
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				id: '2',
 | 
			
		||||
				name: '测试工单2',
 | 
			
		||||
				progressRate: 0.932323,
 | 
			
		||||
        progressRate: 0.932323,
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				id: '3',
 | 
			
		||||
				name: '测试工单3',
 | 
			
		||||
				progressRate: 0.23232,
 | 
			
		||||
        progressRate: 0.23232,
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
			},
 | 
			
		||||
			{
 | 
			
		||||
				id: '4',
 | 
			
		||||
				name: '测试工单4',
 | 
			
		||||
				progressRate: 0.32323,
 | 
			
		||||
        progressRate: 0.32323,
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        id: '4',
 | 
			
		||||
        id: '5',
 | 
			
		||||
        name: '测试工单4',
 | 
			
		||||
        progressRate: 0.32323,
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        id: '4',
 | 
			
		||||
        id: '6',
 | 
			
		||||
        name: '测试工单4',
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        progressRate: 0.32323,
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        id: '4',
 | 
			
		||||
        id: '7',
 | 
			
		||||
        name: '测试工单4',
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        progressRate: 0.32323,
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        id: '4',
 | 
			
		||||
        id: '8',
 | 
			
		||||
        name: '测试工单4',
 | 
			
		||||
        progressRate: 0.32323,
 | 
			
		||||
        size: '1100*5554*22',
 | 
			
		||||
        plan: 11111,
 | 
			
		||||
        finish: 111,
 | 
			
		||||
      },
 | 
			
		||||
			// {
 | 
			
		||||
			//   id: '5',
 | 
			
		||||
@@ -416,7 +453,10 @@ export default {
 | 
			
		||||
				return {
 | 
			
		||||
					id: ele.id,
 | 
			
		||||
					name: ele.name,
 | 
			
		||||
					progressRate: parseFloat((ele.progressRate * 100).toFixed(0)),
 | 
			
		||||
          progressRate: parseFloat((ele.progressRate * 100).toFixed(0)),
 | 
			
		||||
          specifications: ele.specifications ?  '规格' + ele.specifications :null,
 | 
			
		||||
          planQuantity: ele.plan ? '计划' + ele.plan + '片' : null,
 | 
			
		||||
          finish: ele.finish + '片',
 | 
			
		||||
				};
 | 
			
		||||
			}
 | 
			
		||||
		});
 | 
			
		||||
@@ -440,8 +480,8 @@ export default {
 | 
			
		||||
          <span style="color:rgba(255,255,255,0.5)" >${item.name || ''}
 | 
			
		||||
            </span>`,
 | 
			
		||||
			`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
 | 
			
		||||
			`<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`,
 | 
			
		||||
			`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
 | 
			
		||||
      `<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:13px 10px 0 0 '}"></div>  ${item.status || ''}</span>`,
 | 
			
		||||
      `<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == '是' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:13px 10px 0 0 '}"></div>  ${item.error || ''}</span>`,
 | 
			
		||||
		]);
 | 
			
		||||
    this.eqConfig.data = eqArr;
 | 
			
		||||
    let data = [
 | 
			
		||||
@@ -690,7 +730,10 @@ export default {
 | 
			
		||||
							return {
 | 
			
		||||
								id: ele.id,
 | 
			
		||||
								name: ele.name,
 | 
			
		||||
								progressRate: parseFloat((ele.progressRate * 100).toFixed(0)),
 | 
			
		||||
                progressRate: parseFloat((ele.progressRate * 100).toFixed(0)),
 | 
			
		||||
                specifications: ele.specifications ?  '规格' + ele.specifications :null,
 | 
			
		||||
                planQuantity: ele.planQuantity  ? '计划' + ele.planQuantity + '片' : null,
 | 
			
		||||
                actualQuantity: ele.actualQuantity ? ele.actualQuantity + '片' : null,
 | 
			
		||||
							};
 | 
			
		||||
						}
 | 
			
		||||
					});
 | 
			
		||||
@@ -704,12 +747,8 @@ export default {
 | 
			
		||||
						`<span style="color:rgba(255,255,255,0.5)">${
 | 
			
		||||
							item.code || ''
 | 
			
		||||
						}</span>`,
 | 
			
		||||
						`<span style="color:rgba(255,255,255,0.5)"><span style="color:rgba(255,255,255,0.5)"></span>  ${
 | 
			
		||||
							item.status || ''
 | 
			
		||||
						}</span>`,
 | 
			
		||||
						`<span style="color:rgba(255,255,255,0.5)">${
 | 
			
		||||
							item.error || ''
 | 
			
		||||
						}</span>`,
 | 
			
		||||
            `<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div>  ${item.status || ''}</span>`,
 | 
			
		||||
            `<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == '是' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div>  ${item.error || ''}</span>`,
 | 
			
		||||
					]);
 | 
			
		||||
          this.eqConfig.data = eqArr;
 | 
			
		||||
          // this.$nextTick(() => {
 | 
			
		||||
@@ -802,6 +841,18 @@ export default {
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.split{
 | 
			
		||||
  width: 1px;
 | 
			
		||||
  // display: inline-block;
 | 
			
		||||
  height: 14px;
 | 
			
		||||
  // margin-top: 2px;
 | 
			
		||||
  // line-height: 0;
 | 
			
		||||
  margin-left: 8px;
 | 
			
		||||
  opacity:calc(.6);
 | 
			
		||||
  margin-right: 8px;
 | 
			
		||||
  background-color: #C8CDD7;
 | 
			
		||||
  // border: 1px solid #C8CDD7;
 | 
			
		||||
}
 | 
			
		||||
.myLegend {
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  top: -28px;
 | 
			
		||||
@@ -902,12 +953,39 @@ export default {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.now-secondary-title {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  width: 70px;
 | 
			
		||||
	margin: 0;
 | 
			
		||||
	font-size: 1em;
 | 
			
		||||
	font-size: 14px;
 | 
			
		||||
	line-height: 2em;
 | 
			
		||||
	color: #fff;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.orderSize {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  width: 120px;
 | 
			
		||||
  margin: 0;
 | 
			
		||||
  font-size: 14px;
 | 
			
		||||
  line-height: 2em;
 | 
			
		||||
  color: #fff;
 | 
			
		||||
}
 | 
			
		||||
.orderFinish {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  width: 60px;
 | 
			
		||||
  margin: 0;
 | 
			
		||||
  font-size: 14px;
 | 
			
		||||
  line-height: 2em;
 | 
			
		||||
  text-align: right;
 | 
			
		||||
  color: #fff;
 | 
			
		||||
}
 | 
			
		||||
.orderPlan {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  width: 100px;
 | 
			
		||||
  margin: 0;
 | 
			
		||||
  font-size: 14px;
 | 
			
		||||
  line-height: 2em;
 | 
			
		||||
  color: #fff;
 | 
			
		||||
  text-align: left;
 | 
			
		||||
}
 | 
			
		||||
.now-team-content {
 | 
			
		||||
	font-size: 3em;
 | 
			
		||||
	line-height: 1em;
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2021-11-18 14:16:25
 | 
			
		||||
 * @LastEditors: DY
 | 
			
		||||
 * @LastEditTime: 2024-03-22 08:53:20
 | 
			
		||||
 * @LastEditTime: 2024-04-08 10:21:46
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -214,7 +214,9 @@ export default {
 | 
			
		||||
								actualQuantity: this.dataForm.actualQuantity
 | 
			
		||||
							}).then(response => {
 | 
			
		||||
								this.$modal.msgSuccess("操作成功!工单状态稍后将会更新!");
 | 
			
		||||
								this.saveData(tempList)
 | 
			
		||||
								if (tempList.length > 0) {
 | 
			
		||||
									this.saveData(tempList)
 | 
			
		||||
								}
 | 
			
		||||
								this.visible = false;
 | 
			
		||||
								this.$emit("refreshDataList");
 | 
			
		||||
							});
 | 
			
		||||
 
 | 
			
		||||
@@ -2,7 +2,7 @@
 | 
			
		||||
 * @Author: zwq
 | 
			
		||||
 * @Date: 2021-11-18 14:16:25
 | 
			
		||||
 * @LastEditors: DY
 | 
			
		||||
 * @LastEditTime: 2024-03-21 16:52:46
 | 
			
		||||
 * @LastEditTime: 2024-04-08 14:27:29
 | 
			
		||||
 * @Description:
 | 
			
		||||
-->
 | 
			
		||||
<template>
 | 
			
		||||
@@ -182,7 +182,8 @@
 | 
			
		||||
					:table-props="tableProps"
 | 
			
		||||
					:page="listQuery.pageNo"
 | 
			
		||||
					:limit="listQuery.pageSize"
 | 
			
		||||
					:table-data="orderList">
 | 
			
		||||
					:table-data="orderList"
 | 
			
		||||
					:max-height="tableH">
 | 
			
		||||
					<method-btn
 | 
			
		||||
						v-if="!isdetail"
 | 
			
		||||
						slot="handleBtn"
 | 
			
		||||
@@ -209,7 +210,8 @@
 | 
			
		||||
					:table-props="tableProps1"
 | 
			
		||||
					:page="listQuery1.pageNo"
 | 
			
		||||
					:limit="listQuery1.pageSize"
 | 
			
		||||
					:table-data="materialList" />
 | 
			
		||||
					:table-data="materialList"
 | 
			
		||||
					:max-height="tableH" />
 | 
			
		||||
				<!-- <pagination
 | 
			
		||||
					v-show="listQuery1.total > 0"
 | 
			
		||||
					:total="listQuery1.total"
 | 
			
		||||
@@ -235,6 +237,7 @@ import SmallTitle from './SmallTitle';
 | 
			
		||||
import { publicFormatter } from "@/utils/dict";
 | 
			
		||||
import { parseTime } from '@/utils/ruoyi'
 | 
			
		||||
import topTabVue from '../../order/base/orderManage/components/topTab.vue';
 | 
			
		||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 | 
			
		||||
 | 
			
		||||
const tableBtn = [
 | 
			
		||||
	{
 | 
			
		||||
@@ -292,9 +295,11 @@ const tableProps1 = [
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [tableHeightMixin],
 | 
			
		||||
	components: { SmallTitle, topTabVue },
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			heightNum: 380,
 | 
			
		||||
			tableBtn,
 | 
			
		||||
			tableProps,
 | 
			
		||||
			tableProps1,
 | 
			
		||||
@@ -455,7 +460,7 @@ export default {
 | 
			
		||||
				// this.listQuery.total = response.data.total;
 | 
			
		||||
			});
 | 
			
		||||
			// 获取预使用原料列表
 | 
			
		||||
			console.log()
 | 
			
		||||
			console.log('111我看看', this.dataForm.materialMethod)
 | 
			
		||||
			if (this.dataForm.id) {
 | 
			
		||||
				if (this.dataForm.materialMethod === 1) {
 | 
			
		||||
					// 产品
 | 
			
		||||
 
 | 
			
		||||
@@ -9,7 +9,8 @@
 | 
			
		||||
			:table-props="tableProps"
 | 
			
		||||
			:page="listQuery.pageNo"
 | 
			
		||||
			:limit="listQuery.pageSize"
 | 
			
		||||
			:table-data="tableData">
 | 
			
		||||
			:table-data="tableData"
 | 
			
		||||
			:max-height="tableH">
 | 
			
		||||
			<method-btn
 | 
			
		||||
				v-if="tableBtn.length"
 | 
			
		||||
				slot="handleBtn"
 | 
			
		||||
@@ -62,7 +63,7 @@ import {
 | 
			
		||||
	getCoreWOList
 | 
			
		||||
} from '@/api/base/coreWorkOrder';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
 | 
			
		||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
@@ -132,7 +133,7 @@ const tableProps = [
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [basicPage],
 | 
			
		||||
	mixins: [basicPage, tableHeightMixin],
 | 
			
		||||
	components: {
 | 
			
		||||
		AddWorkOrder,
 | 
			
		||||
		AddOrUpdate,
 | 
			
		||||
 
 | 
			
		||||
@@ -32,6 +32,7 @@ import {
 | 
			
		||||
import { getEnergyTypeListAll } from '@/api/base/energyType';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import moment from 'moment';
 | 
			
		||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
@@ -61,7 +62,7 @@ const tableProps = [
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [basicPage],
 | 
			
		||||
	mixins: [basicPage,tableHeightMixin],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
@@ -70,7 +71,6 @@ export default {
 | 
			
		||||
			},
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			tableProps,
 | 
			
		||||
      tableH: this.tableHeight(260),
 | 
			
		||||
			drawerVisible: false,
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
@@ -113,9 +113,6 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	components: {},
 | 
			
		||||
	created() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.tableH = this.tableHeight(260)
 | 
			
		||||
    })
 | 
			
		||||
		getEnergyTypeListAll().then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		});
 | 
			
		||||
 
 | 
			
		||||
@@ -32,6 +32,7 @@ import {
 | 
			
		||||
import { getEnergyTypeListAll } from '@/api/base/energyType';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import moment from 'moment';
 | 
			
		||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
@@ -71,7 +72,7 @@ const tableProps = [
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [basicPage],
 | 
			
		||||
	mixins: [basicPage,tableHeightMixin],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
@@ -80,7 +81,6 @@ export default {
 | 
			
		||||
			},
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			tableProps,
 | 
			
		||||
      tableH: this.tableHeight(260),
 | 
			
		||||
			drawerVisible: false,
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
@@ -137,9 +137,6 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	components: {},
 | 
			
		||||
	created() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.tableH = this.tableHeight(260)
 | 
			
		||||
    })
 | 
			
		||||
		const end = new Date();
 | 
			
		||||
		const start = new Date();
 | 
			
		||||
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
 | 
			
		||||
 
 | 
			
		||||
@@ -12,7 +12,7 @@
 | 
			
		||||
			:table-props="tableProps"
 | 
			
		||||
			:page="listQuery.pageNo"
 | 
			
		||||
			:limit="listQuery.pageSize"
 | 
			
		||||
      :max-height="tableH"
 | 
			
		||||
			:max-height="tableH"
 | 
			
		||||
			:table-data="tableData">
 | 
			
		||||
			<method-btn
 | 
			
		||||
				v-if="tableBtn.length"
 | 
			
		||||
@@ -53,6 +53,7 @@ import {
 | 
			
		||||
} from '@/api/cost/costMaterialSet';
 | 
			
		||||
import { getHotMaterialList } from '@/api/base/coreHotMaterial';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
@@ -91,7 +92,7 @@ const tableProps = [
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [basicPage],
 | 
			
		||||
	mixins: [basicPage,tableHeightMixin],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
@@ -99,7 +100,6 @@ export default {
 | 
			
		||||
				deleteURL: deleteCostMaterialSet,
 | 
			
		||||
			},
 | 
			
		||||
			tableProps,
 | 
			
		||||
      tableH: this.tableHeight(260),
 | 
			
		||||
			tableBtn: [
 | 
			
		||||
				this.$auth.hasPermi(`cost:rawMaterialConfig:update`)
 | 
			
		||||
					? {
 | 
			
		||||
@@ -132,7 +132,11 @@ export default {
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
					type:
 | 
			
		||||
						this.$auth.hasPermi('cost:rawMaterialConfig:create') &&
 | 
			
		||||
						this.$auth.hasPermi('cost:rawMaterialConfig:query')
 | 
			
		||||
							? 'separate'
 | 
			
		||||
							: '',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: this.$auth.hasPermi('cost:rawMaterialConfig:create')
 | 
			
		||||
@@ -150,9 +154,6 @@ export default {
 | 
			
		||||
		AddOrUpdate,
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.tableH = this.tableHeight(260)
 | 
			
		||||
    })
 | 
			
		||||
		getHotMaterialList().then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		});
 | 
			
		||||
 
 | 
			
		||||
@@ -32,6 +32,7 @@ import {
 | 
			
		||||
import { getHotMaterialList } from '@/api/base/coreHotMaterial';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import moment from 'moment';
 | 
			
		||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
@@ -66,7 +67,7 @@ const tableProps = [
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [basicPage],
 | 
			
		||||
	mixins: [basicPage,tableHeightMixin],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
@@ -75,7 +76,6 @@ export default {
 | 
			
		||||
			},
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			tableProps,
 | 
			
		||||
      tableH: this.tableHeight(260),
 | 
			
		||||
			drawerVisible: false,
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
@@ -118,9 +118,6 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	components: {},
 | 
			
		||||
	created() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.tableH = this.tableHeight(260)
 | 
			
		||||
    })
 | 
			
		||||
		getHotMaterialList().then((response) => {
 | 
			
		||||
			this.formConfig[0].selectOptions = response.data;
 | 
			
		||||
		});
 | 
			
		||||
 
 | 
			
		||||
@@ -32,6 +32,7 @@ import {
 | 
			
		||||
import { getHotMaterialList } from '@/api/base/coreHotMaterial';
 | 
			
		||||
import { publicFormatter } from '@/utils/dict';
 | 
			
		||||
import moment from 'moment';
 | 
			
		||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
 | 
			
		||||
 | 
			
		||||
const tableProps = [
 | 
			
		||||
	{
 | 
			
		||||
@@ -70,7 +71,7 @@ const tableProps = [
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	mixins: [basicPage],
 | 
			
		||||
	mixins: [basicPage,tableHeightMixin],
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			urlOptions: {
 | 
			
		||||
@@ -79,7 +80,6 @@ export default {
 | 
			
		||||
			},
 | 
			
		||||
			tableData: [],
 | 
			
		||||
			tableProps,
 | 
			
		||||
      tableH: this.tableHeight(260),
 | 
			
		||||
			drawerVisible: false,
 | 
			
		||||
			formConfig: [
 | 
			
		||||
				{
 | 
			
		||||
@@ -136,9 +136,6 @@ export default {
 | 
			
		||||
	},
 | 
			
		||||
	components: {},
 | 
			
		||||
	created() {
 | 
			
		||||
    window.addEventListener('resize', () => {
 | 
			
		||||
      this.tableH = this.tableHeight(260)
 | 
			
		||||
    })
 | 
			
		||||
		const end = new Date();
 | 
			
		||||
		const start = new Date();
 | 
			
		||||
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
 | 
			
		||||
 
 | 
			
		||||
@@ -1,234 +1,258 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div style="height: 370px;">
 | 
			
		||||
    <NotMsg v-show="notMsg"/>
 | 
			
		||||
    <div id="numRateChart" class="num-rate-chart" style="width:900px;height:420px;" v-show='!notMsg'></div>
 | 
			
		||||
  </div>
 | 
			
		||||
	<div style="height: 370px">
 | 
			
		||||
		<NotMsg v-show="notMsg" />
 | 
			
		||||
		<div
 | 
			
		||||
			id="numRateChart"
 | 
			
		||||
			class="num-rate-chart"
 | 
			
		||||
			style="width: 900px; height: 420px"
 | 
			
		||||
			v-show="!notMsg"></div>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import * as echarts from 'echarts';
 | 
			
		||||
import resize from './../mixins/resize'
 | 
			
		||||
import NotMsg from './../components/NotMsg'
 | 
			
		||||
import resize from './../mixins/resize';
 | 
			
		||||
import NotMsg from './../components/NotMsg';
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'NumRateChart',
 | 
			
		||||
  mixins: [resize],
 | 
			
		||||
  components:{ NotMsg },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      chart: null,
 | 
			
		||||
      notMsg:true
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  computed: {
 | 
			
		||||
    productline() {
 | 
			
		||||
      return this.$store.state.websocket.productline
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  watch:{
 | 
			
		||||
    productline: {
 | 
			
		||||
	name: 'NumRateChart',
 | 
			
		||||
	mixins: [resize],
 | 
			
		||||
	components: { NotMsg },
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			chart: null,
 | 
			
		||||
			notMsg: true,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	computed: {
 | 
			
		||||
		productline() {
 | 
			
		||||
			return this.$store.state.websocket.productline;
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	watch: {
 | 
			
		||||
		productline: {
 | 
			
		||||
			handler(newVal, oldVal) {
 | 
			
		||||
        if (newVal === oldVal) {
 | 
			
		||||
          return false
 | 
			
		||||
        }
 | 
			
		||||
        this.updateChart()
 | 
			
		||||
        this.$emit('emitFun')
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
				if (newVal === oldVal) {
 | 
			
		||||
					return false;
 | 
			
		||||
				}
 | 
			
		||||
				this.updateChart();
 | 
			
		||||
				this.$emit('emitFun');
 | 
			
		||||
			},
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.$el.addEventListener('resize', () => {
 | 
			
		||||
			console.log('resziing.....');
 | 
			
		||||
		});
 | 
			
		||||
    this.updateChart()
 | 
			
		||||
		this.updateChart();
 | 
			
		||||
	},
 | 
			
		||||
  methods: {
 | 
			
		||||
    updateChart() {
 | 
			
		||||
      if (this.productline && this.productline.length > 0) {
 | 
			
		||||
        this.notMsg = false
 | 
			
		||||
      } else {
 | 
			
		||||
        this.notMsg = true
 | 
			
		||||
        return
 | 
			
		||||
      }
 | 
			
		||||
      let xData = []
 | 
			
		||||
      let outputNum = []
 | 
			
		||||
      let passRate = []
 | 
			
		||||
      this.productline && this.productline.length > 0 && this.productline.map(item => {
 | 
			
		||||
        if ((item.lineName).includes('D')) {
 | 
			
		||||
          xData.push(item.lineName)
 | 
			
		||||
          outputNum.push(item.outputNum)
 | 
			
		||||
          passRate.push(item.passRate?item.passRate*100:null)
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
      if (
 | 
			
		||||
        this.chart !== null &&
 | 
			
		||||
        this.chart !== '' &&
 | 
			
		||||
        this.chart !== undefined
 | 
			
		||||
      ) {
 | 
			
		||||
        this.chart.dispose()
 | 
			
		||||
      }
 | 
			
		||||
      this.chart = echarts.init(document.getElementById('numRateChart'));
 | 
			
		||||
      var option = {
 | 
			
		||||
        grid: { top: 82, right: 60, bottom: 20, left: 90 },
 | 
			
		||||
        tooltip: {
 | 
			
		||||
          trigger: "axis",
 | 
			
		||||
          axisPointer: {
 | 
			
		||||
            type: "shadow",
 | 
			
		||||
          },
 | 
			
		||||
          className: "num-rate-chart-tooltip"
 | 
			
		||||
        },
 | 
			
		||||
        legend: {
 | 
			
		||||
          itemWidth:10,
 | 
			
		||||
          itemHeight:10,
 | 
			
		||||
          top: '2.5%',
 | 
			
		||||
	methods: {
 | 
			
		||||
		updateChart() {
 | 
			
		||||
			if (this.productline && this.productline.length > 0) {
 | 
			
		||||
				this.notMsg = false;
 | 
			
		||||
			} else {
 | 
			
		||||
				this.notMsg = true;
 | 
			
		||||
				return;
 | 
			
		||||
			}
 | 
			
		||||
			let xData = [];
 | 
			
		||||
			let outputNum = [];
 | 
			
		||||
			let passRate = [];
 | 
			
		||||
			for (let i = 0; i < this.productline.length - 1; i++) {
 | 
			
		||||
				// 二次循环,注意:再减去外层的循环次数,向后依次两两相互比较转换;
 | 
			
		||||
				for (let j = 0; j < this.productline.length - i - 1; j++) {
 | 
			
		||||
					// 当前一个值大于后一个值
 | 
			
		||||
					if (
 | 
			
		||||
						this.productline[j].lineName.substr(
 | 
			
		||||
							this.productline[j].lineName.length - 1,
 | 
			
		||||
							1
 | 
			
		||||
						) >
 | 
			
		||||
						this.productline[j + 1].lineName.substr(
 | 
			
		||||
							this.productline[j + 1].lineName.length - 1,
 | 
			
		||||
							1
 | 
			
		||||
						)
 | 
			
		||||
					) {
 | 
			
		||||
						// 定义变量,以赋值的形式前后交换,直到换到最小的在前面,左右再无比较,则循环结束形成排序结果
 | 
			
		||||
						let temp = this.productline[j];
 | 
			
		||||
						this.productline[j] = this.productline[j + 1];
 | 
			
		||||
						this.productline[j + 1] = temp;
 | 
			
		||||
					}
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
			this.productline &&
 | 
			
		||||
				this.productline.length > 0 &&
 | 
			
		||||
				this.productline.map((item) => {
 | 
			
		||||
					if (item.lineName.includes('D')) {
 | 
			
		||||
						xData.push(item.lineName);
 | 
			
		||||
						outputNum.push(item.outputNum);
 | 
			
		||||
						passRate.push(item.passRate);
 | 
			
		||||
					}
 | 
			
		||||
				});
 | 
			
		||||
			if (
 | 
			
		||||
				this.chart !== null &&
 | 
			
		||||
				this.chart !== '' &&
 | 
			
		||||
				this.chart !== undefined
 | 
			
		||||
			) {
 | 
			
		||||
				this.chart.dispose();
 | 
			
		||||
			}
 | 
			
		||||
			this.chart = echarts.init(document.getElementById('numRateChart'));
 | 
			
		||||
			var option = {
 | 
			
		||||
				grid: { top: 82, right: 60, bottom: 20, left: 90 },
 | 
			
		||||
				tooltip: {
 | 
			
		||||
					trigger: 'axis',
 | 
			
		||||
					axisPointer: {
 | 
			
		||||
						type: 'shadow',
 | 
			
		||||
					},
 | 
			
		||||
					className: 'num-rate-chart-tooltip',
 | 
			
		||||
				},
 | 
			
		||||
				legend: {
 | 
			
		||||
					itemWidth: 10,
 | 
			
		||||
					itemHeight: 10,
 | 
			
		||||
					top: '2.5%',
 | 
			
		||||
					right: '20px',
 | 
			
		||||
          icon: 'rect',
 | 
			
		||||
          data: [
 | 
			
		||||
            {name:'产线产量',itemStyle:{color:'#364BFE'}},
 | 
			
		||||
            {name:'良品率',itemStyle:{color:'#FFCB59'}}
 | 
			
		||||
          ],
 | 
			
		||||
          textStyle: {
 | 
			
		||||
            color: "#DFF1FE",
 | 
			
		||||
            fontSize: 12,
 | 
			
		||||
          }
 | 
			
		||||
        },
 | 
			
		||||
        xAxis: [
 | 
			
		||||
          {
 | 
			
		||||
            type: 'category',
 | 
			
		||||
            data: xData,
 | 
			
		||||
            axisLabel: {
 | 
			
		||||
              color: "#fff",
 | 
			
		||||
              fontSize: 12,
 | 
			
		||||
            },
 | 
			
		||||
            axisPointer: {
 | 
			
		||||
              type: 'shadow'
 | 
			
		||||
            },
 | 
			
		||||
            axisTick: { show: false },
 | 
			
		||||
            axisLine: {
 | 
			
		||||
              lineStyle: {
 | 
			
		||||
                width: 1,
 | 
			
		||||
                color: "#213259",
 | 
			
		||||
              },
 | 
			
		||||
            },
 | 
			
		||||
          }
 | 
			
		||||
        ],
 | 
			
		||||
        yAxis: [
 | 
			
		||||
          {
 | 
			
		||||
            type: 'value',
 | 
			
		||||
            name: '产量/片',
 | 
			
		||||
            nameTextStyle: {
 | 
			
		||||
              color: '#fff',
 | 
			
		||||
              fontSize: 10,
 | 
			
		||||
              align: 'right',
 | 
			
		||||
            },
 | 
			
		||||
            axisLabel: {
 | 
			
		||||
              color: "#fff",
 | 
			
		||||
              fontSize: 12,
 | 
			
		||||
              formatter: '{value}'
 | 
			
		||||
            },
 | 
			
		||||
            axisLine: {
 | 
			
		||||
              show: true,
 | 
			
		||||
              lineStyle: {
 | 
			
		||||
                color: "#213259",
 | 
			
		||||
              },
 | 
			
		||||
            },
 | 
			
		||||
            splitLine: {
 | 
			
		||||
              lineStyle: {
 | 
			
		||||
                color: "#213259a0",
 | 
			
		||||
              },
 | 
			
		||||
            }
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
            type: 'value',
 | 
			
		||||
            name: '良品率',
 | 
			
		||||
            nameTextStyle: {
 | 
			
		||||
              color: '#fff',
 | 
			
		||||
              fontSize: 10,
 | 
			
		||||
              align: 'LEFT',
 | 
			
		||||
            },
 | 
			
		||||
            axisLabel: {
 | 
			
		||||
              color: "#fff",
 | 
			
		||||
              fontSize: 12,
 | 
			
		||||
              formatter: () =>{
 | 
			
		||||
                return value ? '{value} %': '-'
 | 
			
		||||
              }
 | 
			
		||||
            },
 | 
			
		||||
          axisLine: {
 | 
			
		||||
            show: true,
 | 
			
		||||
            lineStyle: {
 | 
			
		||||
              color: "#213259",
 | 
			
		||||
            },
 | 
			
		||||
          },
 | 
			
		||||
          splitLine: {
 | 
			
		||||
            lineStyle: {
 | 
			
		||||
              color: "#213259a0",
 | 
			
		||||
            },
 | 
			
		||||
          }
 | 
			
		||||
          }
 | 
			
		||||
        ],
 | 
			
		||||
        series: [
 | 
			
		||||
          {
 | 
			
		||||
            name: '产线产量',
 | 
			
		||||
            type: 'bar',
 | 
			
		||||
            tooltip: {
 | 
			
		||||
              valueFormatter: function (value) {
 | 
			
		||||
                return value;
 | 
			
		||||
              }
 | 
			
		||||
            },
 | 
			
		||||
            barWidth: 20,
 | 
			
		||||
            itemStyle: {
 | 
			
		||||
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 | 
			
		||||
                { offset: 0, color: '#5CB7FF' },
 | 
			
		||||
                { offset: 1, color: '#364BFE' }
 | 
			
		||||
              ])
 | 
			
		||||
            },
 | 
			
		||||
            data: outputNum
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
            name: '良品率',
 | 
			
		||||
            type: 'line',
 | 
			
		||||
            yAxisIndex: 1,
 | 
			
		||||
            tooltip: {
 | 
			
		||||
              valueFormatter: function (value) {
 | 
			
		||||
                return value?value + '%':'-';
 | 
			
		||||
              }
 | 
			
		||||
            },
 | 
			
		||||
            itemStyle: {
 | 
			
		||||
              color: '#FFD160'
 | 
			
		||||
            },
 | 
			
		||||
            areaStyle: {
 | 
			
		||||
					icon: 'rect',
 | 
			
		||||
					data: [
 | 
			
		||||
						{ name: '产线产量', itemStyle: { color: '#364BFE' } },
 | 
			
		||||
						{ name: '良品率', itemStyle: { color: '#FFCB59' } },
 | 
			
		||||
					],
 | 
			
		||||
					textStyle: {
 | 
			
		||||
						color: '#DFF1FE',
 | 
			
		||||
						fontSize: 12,
 | 
			
		||||
					},
 | 
			
		||||
				},
 | 
			
		||||
				xAxis: [
 | 
			
		||||
					{
 | 
			
		||||
						type: 'category',
 | 
			
		||||
						data: xData,
 | 
			
		||||
						axisLabel: {
 | 
			
		||||
							color: '#fff',
 | 
			
		||||
							fontSize: 12,
 | 
			
		||||
						},
 | 
			
		||||
						axisPointer: {
 | 
			
		||||
							type: 'shadow',
 | 
			
		||||
						},
 | 
			
		||||
						axisTick: { show: false },
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								width: 1,
 | 
			
		||||
								color: '#213259',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				yAxis: [
 | 
			
		||||
					{
 | 
			
		||||
						type: 'value',
 | 
			
		||||
						name: '产量/片',
 | 
			
		||||
						nameTextStyle: {
 | 
			
		||||
							color: '#fff',
 | 
			
		||||
							fontSize: 10,
 | 
			
		||||
							align: 'right',
 | 
			
		||||
						},
 | 
			
		||||
						axisLabel: {
 | 
			
		||||
							color: '#fff',
 | 
			
		||||
							fontSize: 12,
 | 
			
		||||
						},
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							show: true,
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								color: '#213259',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								color: '#213259a0',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						type: 'value',
 | 
			
		||||
						name: '良品率',
 | 
			
		||||
						nameTextStyle: {
 | 
			
		||||
							color: '#fff',
 | 
			
		||||
							fontSize: 10,
 | 
			
		||||
							align: 'LEFT',
 | 
			
		||||
						},
 | 
			
		||||
						axisLabel: {
 | 
			
		||||
							color: '#fff',
 | 
			
		||||
							fontSize: 12,
 | 
			
		||||
							formatter: '{value}%',
 | 
			
		||||
						},
 | 
			
		||||
						axisLine: {
 | 
			
		||||
							show: true,
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								color: '#213259',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						splitLine: {
 | 
			
		||||
							lineStyle: {
 | 
			
		||||
								color: '#213259a0',
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
				series: [
 | 
			
		||||
					{
 | 
			
		||||
						name: '产线产量',
 | 
			
		||||
						type: 'bar',
 | 
			
		||||
						tooltip: {
 | 
			
		||||
							valueFormatter: function (value) {
 | 
			
		||||
								return value;
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						barWidth: 20,
 | 
			
		||||
						itemStyle: {
 | 
			
		||||
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 | 
			
		||||
                { offset: 0, color: '#FFCB59' + "40" },
 | 
			
		||||
                { offset: 0.5, color: '#FFCB59' + "20" },
 | 
			
		||||
                { offset: 1, color: '#FFCB59' + "00" },
 | 
			
		||||
                ]),
 | 
			
		||||
            },
 | 
			
		||||
            lineStyle: {
 | 
			
		||||
                width: 1
 | 
			
		||||
            },
 | 
			
		||||
            symbol: 'circle',
 | 
			
		||||
					  symbolSize: 5,
 | 
			
		||||
            data: passRate
 | 
			
		||||
          }
 | 
			
		||||
        ]
 | 
			
		||||
      };
 | 
			
		||||
      option && this.chart.setOption(option)
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
								{ offset: 0, color: '#5CB7FF' },
 | 
			
		||||
								{ offset: 1, color: '#364BFE' },
 | 
			
		||||
							]),
 | 
			
		||||
						},
 | 
			
		||||
						data: outputNum,
 | 
			
		||||
					},
 | 
			
		||||
					{
 | 
			
		||||
						name: '良品率',
 | 
			
		||||
						type: 'line',
 | 
			
		||||
						yAxisIndex: 1,
 | 
			
		||||
						tooltip: {
 | 
			
		||||
							valueFormatter: function (value) {
 | 
			
		||||
								return value ? value + '%' : '-';
 | 
			
		||||
							},
 | 
			
		||||
						},
 | 
			
		||||
						itemStyle: {
 | 
			
		||||
							color: '#FFD160',
 | 
			
		||||
						},
 | 
			
		||||
						areaStyle: {
 | 
			
		||||
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 | 
			
		||||
								{ offset: 0, color: '#FFCB59' + '40' },
 | 
			
		||||
								{ offset: 0.5, color: '#FFCB59' + '20' },
 | 
			
		||||
								{ offset: 1, color: '#FFCB59' + '00' },
 | 
			
		||||
							]),
 | 
			
		||||
						},
 | 
			
		||||
						lineStyle: {
 | 
			
		||||
							width: 1,
 | 
			
		||||
						},
 | 
			
		||||
						symbol: 'circle',
 | 
			
		||||
						symbolSize: 5,
 | 
			
		||||
						data: passRate,
 | 
			
		||||
					},
 | 
			
		||||
				],
 | 
			
		||||
			};
 | 
			
		||||
			option && this.chart.setOption(option);
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<style scoped lang="scss">
 | 
			
		||||
.num-rate-chart {
 | 
			
		||||
	width: 100%;
 | 
			
		||||
	height: 100%;
 | 
			
		||||
  top: -50px;
 | 
			
		||||
	top: -50px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
<style>
 | 
			
		||||
  .num-rate-chart-tooltip {
 | 
			
		||||
    background: #0a2b4f77 !important;
 | 
			
		||||
    border: none !important;
 | 
			
		||||
    backdrop-filter: blur(12px);
 | 
			
		||||
  }
 | 
			
		||||
  .num-rate-chart-tooltip * {
 | 
			
		||||
    color: #fff !important;
 | 
			
		||||
  }
 | 
			
		||||
.num-rate-chart-tooltip {
 | 
			
		||||
	background: #0a2b4f77 !important;
 | 
			
		||||
	border: none !important;
 | 
			
		||||
	backdrop-filter: blur(12px);
 | 
			
		||||
}
 | 
			
		||||
.num-rate-chart-tooltip * {
 | 
			
		||||
	color: #fff !important;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
@@ -1,66 +1,83 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div style="flex: 1;">
 | 
			
		||||
    <Container name="各工序缺陷汇总" size="middle" style="">
 | 
			
		||||
      <TimePrompt class="timeShow" :timestr="timestr" />
 | 
			
		||||
      <div style="padding: 5px 10px;">
 | 
			
		||||
        <dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
 | 
			
		||||
      </div>
 | 
			
		||||
    </Container>
 | 
			
		||||
  </div>
 | 
			
		||||
	<div style="flex: 1">
 | 
			
		||||
		<Container
 | 
			
		||||
			name="各工序缺陷汇总"
 | 
			
		||||
			size="middle"
 | 
			
		||||
			style="">
 | 
			
		||||
			<TimePrompt
 | 
			
		||||
				class="timeShow"
 | 
			
		||||
				:timestr="timestr" />
 | 
			
		||||
			<div style="padding: 5px 10px">
 | 
			
		||||
				<dv-scroll-board
 | 
			
		||||
					:config="config"
 | 
			
		||||
					style="width: 575px; height: 380px"
 | 
			
		||||
					ref="defectScrollBoard" />
 | 
			
		||||
			</div>
 | 
			
		||||
		</Container>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
import Container from '../components/Container.vue';
 | 
			
		||||
import TimePrompt from '../components/TimePrompt';
 | 
			
		||||
import { switchShowTime } from '../utils'
 | 
			
		||||
import { switchShowTime } from '../utils';
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'DefectSum',
 | 
			
		||||
  components: { Container, TimePrompt },
 | 
			
		||||
  computed: {
 | 
			
		||||
    defectSum() {
 | 
			
		||||
      return this.$store.state.websocket.defectSum
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      timestr: '',
 | 
			
		||||
      config: {
 | 
			
		||||
        header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
 | 
			
		||||
        headerBGC: 'rgba(32, 55, 96, 0.8)',
 | 
			
		||||
        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
 | 
			
		||||
        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
 | 
			
		||||
        columnWidth: [60],
 | 
			
		||||
        align: ['center'],
 | 
			
		||||
        data: [],
 | 
			
		||||
        // data: [[1, 'Y61', '破损','10','气泡']],
 | 
			
		||||
        rowNum: 10
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.timestr = switchShowTime('日')
 | 
			
		||||
  },
 | 
			
		||||
  watch:{
 | 
			
		||||
    defectSum: {
 | 
			
		||||
	name: 'DefectSum',
 | 
			
		||||
	components: { Container, TimePrompt },
 | 
			
		||||
	computed: {
 | 
			
		||||
		defectSum() {
 | 
			
		||||
			return this.$store.state.websocket.defectSum;
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			timestr: '',
 | 
			
		||||
			config: {
 | 
			
		||||
				header: ['序号', '产线', '工序', '损耗片数', '缺陷类型'],
 | 
			
		||||
				headerBGC: 'rgba(32, 55, 96, 0.8)',
 | 
			
		||||
				oddRowBGC: 'rgba(32, 55, 96, 0.8)',
 | 
			
		||||
				evenRowBGC: 'rgba(14, 32, 62, 0.8)',
 | 
			
		||||
				columnWidth: [60],
 | 
			
		||||
				align: ['center'],
 | 
			
		||||
				data: [
 | 
			
		||||
					//假数据
 | 
			
		||||
					[1, 'D61', '成型', '3片', '细长泡'],
 | 
			
		||||
					[2, 'D62', '组合落板', '4片', '细长泡'],
 | 
			
		||||
					[3, 'D61', '磨边', '6片', '开口泡'],
 | 
			
		||||
					[4, 'D63', '清洗', '5片', '结石'],
 | 
			
		||||
					[5, 'D64', '打孔', '2片', '结石'],
 | 
			
		||||
					[6, 'D63', '成型', '7片', '开口泡'],
 | 
			
		||||
					[7, 'D61', '上片', '8片', '结石'],
 | 
			
		||||
				],
 | 
			
		||||
				// data: [],
 | 
			
		||||
				rowNum: 10,
 | 
			
		||||
			},
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.timestr = switchShowTime('日');
 | 
			
		||||
	},
 | 
			
		||||
	watch: {
 | 
			
		||||
		defectSum: {
 | 
			
		||||
			handler(newVal, oldVal) {
 | 
			
		||||
        let outArr = this.defectSum.map((item, index) => [
 | 
			
		||||
          index+1,
 | 
			
		||||
          item.productionLineName,
 | 
			
		||||
          item.sectionName,
 | 
			
		||||
          item.count,
 | 
			
		||||
          item.inspectionTypeName
 | 
			
		||||
      ]);
 | 
			
		||||
        this.config.data = outArr
 | 
			
		||||
        this.$refs['defectScrollBoard'].updateRows(outArr)
 | 
			
		||||
        this.timestr = switchShowTime('日')
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
				let outArr = this.defectSum.map((item, index) => [
 | 
			
		||||
					index + 1,
 | 
			
		||||
					item.productionLineName,
 | 
			
		||||
					item.sectionName,
 | 
			
		||||
					item.count,
 | 
			
		||||
					item.inspectionTypeName,
 | 
			
		||||
				]);
 | 
			
		||||
				this.config.data = outArr;
 | 
			
		||||
				this.$refs['defectScrollBoard'].updateRows(outArr);
 | 
			
		||||
				this.timestr = switchShowTime('日');
 | 
			
		||||
			},
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<style lang='scss' scoped>
 | 
			
		||||
.timeShow {
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  top: 20px;
 | 
			
		||||
  left: 240px;
 | 
			
		||||
	position: absolute;
 | 
			
		||||
	top: 20px;
 | 
			
		||||
	left: 240px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
@@ -1,24 +1,23 @@
 | 
			
		||||
<!-- 
 | 
			
		||||
    filename: MaterialCost.vue
 | 
			
		||||
    author: liubin
 | 
			
		||||
    date: 2023-12-06 09:09:27
 | 
			
		||||
    description: 
 | 
			
		||||
-->
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
	<Container name="原料用量统计" size="middle" style="">
 | 
			
		||||
		<div style="flex: 1; display: flex; gap: 8px;flex-direction: column;">
 | 
			
		||||
	<Container
 | 
			
		||||
		name="原料用量统计"
 | 
			
		||||
		size="middle"
 | 
			
		||||
		style="">
 | 
			
		||||
		<div style="flex: 1; display: flex; gap: 8px; flex-direction: column">
 | 
			
		||||
			<div
 | 
			
		||||
				class="absolute"
 | 
			
		||||
				style="
 | 
			
		||||
					flex:3;
 | 
			
		||||
					flex: 2;
 | 
			
		||||
					padding: 12px 12px 0 12px;
 | 
			
		||||
					display: grid;
 | 
			
		||||
					grid-template-columns: repeat(3, 1fr);
 | 
			
		||||
					grid-template-columns: repeat(2, 1fr);
 | 
			
		||||
					grid-auto-rows: repeat(4, 1fr);
 | 
			
		||||
					gap: 8px;
 | 
			
		||||
				">
 | 
			
		||||
				<ShadowRect v-for="(item, index) in materialMsg1" :key="index" :rounded="false">
 | 
			
		||||
				<ShadowRect
 | 
			
		||||
					v-for="(item, index) in materialMsg"
 | 
			
		||||
					:key="index"
 | 
			
		||||
					:rounded="false">
 | 
			
		||||
					<div
 | 
			
		||||
						class="material"
 | 
			
		||||
						style="
 | 
			
		||||
@@ -30,43 +29,24 @@
 | 
			
		||||
							align-items: center;
 | 
			
		||||
							justify-content: center;
 | 
			
		||||
						">
 | 
			
		||||
						<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
 | 
			
		||||
							{{item.materialUsed}}
 | 
			
		||||
						<span
 | 
			
		||||
							style="
 | 
			
		||||
								color: #0ee8e4;
 | 
			
		||||
								font-weight: 500;
 | 
			
		||||
								font-size: 32px;
 | 
			
		||||
								white-space: nowrap;
 | 
			
		||||
								overflow: hidden;
 | 
			
		||||
								text-overflow: ellipsis;
 | 
			
		||||
							">
 | 
			
		||||
							{{ item.materialUsed }}
 | 
			
		||||
						</span>
 | 
			
		||||
						<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
 | 
			
		||||
							- {{item.materialName}}/kg-
 | 
			
		||||
						</span>
 | 
			
		||||
					</div>
 | 
			
		||||
				</ShadowRect>
 | 
			
		||||
			</div>
 | 
			
		||||
			<div style="flex:1;
 | 
			
		||||
					padding: 0 12px 12px 12px;
 | 
			
		||||
					display: grid;
 | 
			
		||||
					grid-template-columns: repeat(4, 1fr);
 | 
			
		||||
					gap: 8px;">
 | 
			
		||||
				<ShadowRect v-for="(item, index) in materialMsg2" :key="index" :rounded="false">
 | 
			
		||||
					<div
 | 
			
		||||
						class="material"
 | 
			
		||||
						style="
 | 
			
		||||
							flex: 1;
 | 
			
		||||
							padding-bottom: 3px;
 | 
			
		||||
							display: flex;
 | 
			
		||||
							flex-direction: column;
 | 
			
		||||
							gap: 4px;
 | 
			
		||||
							align-items: center;
 | 
			
		||||
							justify-content: center;
 | 
			
		||||
						">
 | 
			
		||||
						<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
 | 
			
		||||
							{{item.materialUsed}}
 | 
			
		||||
						</span>
 | 
			
		||||
						<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
 | 
			
		||||
							- {{item.materialName}}/kg-
 | 
			
		||||
							- {{ item.materialName }}/kg-
 | 
			
		||||
						</span>
 | 
			
		||||
					</div>
 | 
			
		||||
				</ShadowRect>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
		
 | 
			
		||||
	</Container>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
@@ -81,12 +61,9 @@ export default {
 | 
			
		||||
		return {};
 | 
			
		||||
	},
 | 
			
		||||
	computed: {
 | 
			
		||||
		materialMsg1() {
 | 
			
		||||
			return this.$store.state.websocket.material.slice(0,9)
 | 
			
		||||
		materialMsg() {
 | 
			
		||||
			return this.$store.state.websocket.material;
 | 
			
		||||
		},
 | 
			
		||||
		materialMsg2() {
 | 
			
		||||
			return this.$store.state.websocket.material.slice(9)
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
	methods: {},
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
@@ -104,21 +104,27 @@ export default {
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					type: this.$auth.hasPermi('equipment:inspection-confirm:create')
 | 
			
		||||
						? 'button'
 | 
			
		||||
						: '',
 | 
			
		||||
					btnName: '新增',
 | 
			
		||||
					name: 'add',
 | 
			
		||||
					plain: true,
 | 
			
		||||
					color: 'success',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					type: this.$auth.hasPermi('equipment:inspection-confirm:confirm')
 | 
			
		||||
						? 'button'
 | 
			
		||||
						: '',
 | 
			
		||||
					btnName: '批量确认',
 | 
			
		||||
					name: 'batchConfirm',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
					plain: true,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					type: this.$auth.hasPermi('equipment:inspection-confirm:export')
 | 
			
		||||
						? 'button'
 | 
			
		||||
						: '',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
					name: 'export',
 | 
			
		||||
					plain: true,
 | 
			
		||||
 
 | 
			
		||||
@@ -160,21 +160,25 @@ export default {
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					type: this.$auth.hasPermi('equipment:maintain-confirm:create')
 | 
			
		||||
						? 'button'
 | 
			
		||||
						: '',
 | 
			
		||||
					btnName: '新增',
 | 
			
		||||
					name: 'add',
 | 
			
		||||
					plain: true,
 | 
			
		||||
					color: 'success',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: 'button',
 | 
			
		||||
					type: this.$auth.hasPermi('equipment:maintain-confirm:confirm')
 | 
			
		||||
						? 'button'
 | 
			
		||||
						: '',
 | 
			
		||||
					btnName: '批量确认',
 | 
			
		||||
					name: 'batchConfirm',
 | 
			
		||||
					color: 'primary',
 | 
			
		||||
					plain: true,
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: this.$auth.hasPermi('equipment:maintain-record:export')
 | 
			
		||||
					type: this.$auth.hasPermi('equipment:maintain-confirm:export')
 | 
			
		||||
						? 'button'
 | 
			
		||||
						: '',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
 
 | 
			
		||||
@@ -193,7 +193,7 @@ export default {
 | 
			
		||||
					type: 'separate',
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					type: this.$auth.hasPermi('base:quality-inspection-type:export')
 | 
			
		||||
					type: this.$auth.hasPermi('equipment:maintain-monitor:export')
 | 
			
		||||
						? 'button'
 | 
			
		||||
						: '',
 | 
			
		||||
					btnName: '导出',
 | 
			
		||||
 
 | 
			
		||||
@@ -1,82 +1,194 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="app-container">
 | 
			
		||||
    <!-- <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
 | 
			
		||||
	<div class="app-container">
 | 
			
		||||
		<!-- <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
 | 
			
		||||
    <doc-alert title="菜单路由" url="https://doc.iocoder.cn/vue2/route/" /> -->
 | 
			
		||||
    <!-- 搜索工作栏 -->
 | 
			
		||||
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
 | 
			
		||||
      <el-form-item label="菜单名称" prop="name">
 | 
			
		||||
        <el-input v-model="queryParams.name" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>
 | 
			
		||||
      </el-form-item>
 | 
			
		||||
      <el-form-item label="状态" prop="status">
 | 
			
		||||
        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
 | 
			
		||||
          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
 | 
			
		||||
        </el-select>
 | 
			
		||||
      </el-form-item>
 | 
			
		||||
      <el-form-item>
 | 
			
		||||
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
 | 
			
		||||
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
 | 
			
		||||
      </el-form-item>
 | 
			
		||||
    </el-form>
 | 
			
		||||
		<!-- 搜索工作栏 -->
 | 
			
		||||
		<el-form
 | 
			
		||||
			:model="queryParams"
 | 
			
		||||
			ref="queryForm"
 | 
			
		||||
			size="small"
 | 
			
		||||
			:inline="true"
 | 
			
		||||
			v-show="showSearch">
 | 
			
		||||
			<el-form-item
 | 
			
		||||
				label="菜单名称"
 | 
			
		||||
				prop="name">
 | 
			
		||||
				<el-input
 | 
			
		||||
					v-model="queryParams.name"
 | 
			
		||||
					placeholder="请输入菜单名称"
 | 
			
		||||
					clearable
 | 
			
		||||
					@keyup.enter.native="handleQuery" />
 | 
			
		||||
			</el-form-item>
 | 
			
		||||
			<el-form-item
 | 
			
		||||
				label="状态"
 | 
			
		||||
				prop="status">
 | 
			
		||||
				<el-select
 | 
			
		||||
					v-model="queryParams.status"
 | 
			
		||||
					placeholder="菜单状态"
 | 
			
		||||
					clearable>
 | 
			
		||||
					<el-option
 | 
			
		||||
						v-for="dict in statusDictDatas"
 | 
			
		||||
						:key="parseInt(dict.value)"
 | 
			
		||||
						:label="dict.label"
 | 
			
		||||
						:value="parseInt(dict.value)" />
 | 
			
		||||
				</el-select>
 | 
			
		||||
			</el-form-item>
 | 
			
		||||
			<el-form-item>
 | 
			
		||||
				<el-button
 | 
			
		||||
					type="primary"
 | 
			
		||||
					icon="el-icon-search"
 | 
			
		||||
					@click="handleQuery">
 | 
			
		||||
					搜索
 | 
			
		||||
				</el-button>
 | 
			
		||||
				<el-button
 | 
			
		||||
					icon="el-icon-refresh"
 | 
			
		||||
					@click="resetQuery">
 | 
			
		||||
					重置
 | 
			
		||||
				</el-button>
 | 
			
		||||
			</el-form-item>
 | 
			
		||||
		</el-form>
 | 
			
		||||
 | 
			
		||||
    <el-row :gutter="10" class="mb8">
 | 
			
		||||
      <el-col :span="1.5">
 | 
			
		||||
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
 | 
			
		||||
                   v-hasPermi="['system:menu:create']">新增</el-button>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <el-col :span="1.5">
 | 
			
		||||
        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
 | 
			
		||||
      </el-col>
 | 
			
		||||
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
 | 
			
		||||
    </el-row>
 | 
			
		||||
		<el-row
 | 
			
		||||
			:gutter="10"
 | 
			
		||||
			class="mb8">
 | 
			
		||||
			<el-col :span="1.5">
 | 
			
		||||
				<el-button
 | 
			
		||||
					type="primary"
 | 
			
		||||
					plain
 | 
			
		||||
					icon="el-icon-plus"
 | 
			
		||||
					size="mini"
 | 
			
		||||
					@click="handleAdd"
 | 
			
		||||
					v-hasPermi="['system:menu:create']">
 | 
			
		||||
					新增
 | 
			
		||||
				</el-button>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="1.5">
 | 
			
		||||
				<el-button
 | 
			
		||||
					type="info"
 | 
			
		||||
					plain
 | 
			
		||||
					icon="el-icon-sort"
 | 
			
		||||
					size="mini"
 | 
			
		||||
					@click="toggleExpandAll">
 | 
			
		||||
					展开/折叠
 | 
			
		||||
				</el-button>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<right-toolbar
 | 
			
		||||
				:showSearch.sync="showSearch"
 | 
			
		||||
				@queryTable="getList"></right-toolbar>
 | 
			
		||||
		</el-row>
 | 
			
		||||
 | 
			
		||||
    <el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="id" :default-expand-all="isExpandAll"
 | 
			
		||||
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
 | 
			
		||||
      <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="250"></el-table-column>
 | 
			
		||||
      <!-- <el-table-column prop="icon" label="图标" align="center" width="100">
 | 
			
		||||
		<el-table
 | 
			
		||||
			v-if="refreshTable"
 | 
			
		||||
			v-loading="loading"
 | 
			
		||||
			:data="menuList"
 | 
			
		||||
			row-key="id"
 | 
			
		||||
			:default-expand-all="isExpandAll"
 | 
			
		||||
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				prop="name"
 | 
			
		||||
				label="菜单名称"
 | 
			
		||||
				:show-overflow-tooltip="true"
 | 
			
		||||
				width="250"></el-table-column>
 | 
			
		||||
			<!-- <el-table-column prop="icon" label="图标" align="center" width="100">
 | 
			
		||||
        <template v-slot="scope">
 | 
			
		||||
          <svg-icon :icon-class="scope.row.icon" />
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column> -->
 | 
			
		||||
      <el-table-column prop="sort" label="排序" width="60"></el-table-column>
 | 
			
		||||
      <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" />
 | 
			
		||||
      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" />
 | 
			
		||||
      <el-table-column prop="componentName" label="组件名称" :show-overflow-tooltip="true" />
 | 
			
		||||
      <el-table-column prop="status" label="状态" width="80">
 | 
			
		||||
        <template v-slot="scope">
 | 
			
		||||
          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
 | 
			
		||||
        <template v-slot="scope">
 | 
			
		||||
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
 | 
			
		||||
                     v-hasPermi="['system:menu:update']">修改</el-button>
 | 
			
		||||
          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
 | 
			
		||||
                     v-hasPermi="['system:menu:create']">新增</el-button>
 | 
			
		||||
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
 | 
			
		||||
                     v-hasPermi="['system:menu:delete']">删除</el-button>
 | 
			
		||||
        </template>
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
    </el-table>
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				prop="sort"
 | 
			
		||||
				label="排序"
 | 
			
		||||
				width="60"></el-table-column>
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				prop="permission"
 | 
			
		||||
				label="权限标识"
 | 
			
		||||
				:show-overflow-tooltip="true" />
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				prop="component"
 | 
			
		||||
				label="组件路径"
 | 
			
		||||
				:show-overflow-tooltip="true" />
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				prop="componentName"
 | 
			
		||||
				label="组件名称"
 | 
			
		||||
				:show-overflow-tooltip="true" />
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				prop="status"
 | 
			
		||||
				label="状态"
 | 
			
		||||
				width="80">
 | 
			
		||||
				<template v-slot="scope">
 | 
			
		||||
					<dict-tag
 | 
			
		||||
						:type="DICT_TYPE.COMMON_STATUS"
 | 
			
		||||
						:value="scope.row.status" />
 | 
			
		||||
				</template>
 | 
			
		||||
			</el-table-column>
 | 
			
		||||
			<el-table-column
 | 
			
		||||
				label="操作"
 | 
			
		||||
				align="center"
 | 
			
		||||
				class-name="small-padding fixed-width">
 | 
			
		||||
				<template v-slot="scope">
 | 
			
		||||
					<el-button
 | 
			
		||||
						size="mini"
 | 
			
		||||
						type="text"
 | 
			
		||||
						icon="el-icon-edit"
 | 
			
		||||
						@click="handleUpdate(scope.row)"
 | 
			
		||||
						v-hasPermi="['system:menu:update']">
 | 
			
		||||
						修改
 | 
			
		||||
					</el-button>
 | 
			
		||||
					<el-button
 | 
			
		||||
						size="mini"
 | 
			
		||||
						type="text"
 | 
			
		||||
						icon="el-icon-plus"
 | 
			
		||||
						@click="handleAdd(scope.row)"
 | 
			
		||||
						v-hasPermi="['system:menu:create']">
 | 
			
		||||
						新增
 | 
			
		||||
					</el-button>
 | 
			
		||||
					<el-button
 | 
			
		||||
						size="mini"
 | 
			
		||||
						type="text"
 | 
			
		||||
						icon="el-icon-delete"
 | 
			
		||||
						@click="handleDelete(scope.row)"
 | 
			
		||||
						v-hasPermi="['system:menu:delete']">
 | 
			
		||||
						删除
 | 
			
		||||
					</el-button>
 | 
			
		||||
				</template>
 | 
			
		||||
			</el-table-column>
 | 
			
		||||
		</el-table>
 | 
			
		||||
 | 
			
		||||
    <!-- 添加或修改菜单对话框 -->
 | 
			
		||||
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
 | 
			
		||||
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
 | 
			
		||||
        <el-row>
 | 
			
		||||
          <el-col :span="24">
 | 
			
		||||
            <el-form-item label="上级菜单">
 | 
			
		||||
              <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true"
 | 
			
		||||
                          placeholder="选择上级菜单"/>
 | 
			
		||||
            </el-form-item>
 | 
			
		||||
          </el-col>
 | 
			
		||||
          <el-col :span="24">
 | 
			
		||||
            <el-form-item label="菜单类型" prop="type">
 | 
			
		||||
              <el-radio-group v-model="form.type">
 | 
			
		||||
                <el-radio v-for="dict in menuTypeDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
 | 
			
		||||
                  {{dict.label}}</el-radio>
 | 
			
		||||
              </el-radio-group>
 | 
			
		||||
            </el-form-item>
 | 
			
		||||
          </el-col>
 | 
			
		||||
          <!-- <el-col :span="24">
 | 
			
		||||
		<!-- 添加或修改菜单对话框 -->
 | 
			
		||||
		<el-dialog
 | 
			
		||||
			:title="title"
 | 
			
		||||
			:visible.sync="open"
 | 
			
		||||
			width="800px"
 | 
			
		||||
			append-to-body>
 | 
			
		||||
			<el-form
 | 
			
		||||
				ref="form"
 | 
			
		||||
				:model="form"
 | 
			
		||||
				:rules="rules"
 | 
			
		||||
				label-width="100px">
 | 
			
		||||
				<el-row>
 | 
			
		||||
					<el-col :span="24">
 | 
			
		||||
						<el-form-item label="上级菜单">
 | 
			
		||||
							<treeselect
 | 
			
		||||
								v-model="form.parentId"
 | 
			
		||||
								:options="menuOptions"
 | 
			
		||||
								:normalizer="normalizer"
 | 
			
		||||
								:show-count="true"
 | 
			
		||||
								placeholder="选择上级菜单" />
 | 
			
		||||
						</el-form-item>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="24">
 | 
			
		||||
						<el-form-item
 | 
			
		||||
							label="菜单类型"
 | 
			
		||||
							prop="type">
 | 
			
		||||
							<el-radio-group v-model="form.type">
 | 
			
		||||
								<el-radio
 | 
			
		||||
									v-for="dict in menuTypeDictDatas"
 | 
			
		||||
									:key="parseInt(dict.value)"
 | 
			
		||||
									:label="parseInt(dict.value)">
 | 
			
		||||
									{{ dict.label }}
 | 
			
		||||
								</el-radio>
 | 
			
		||||
							</el-radio-group>
 | 
			
		||||
						</el-form-item>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<!-- <el-col :span="24">
 | 
			
		||||
            <el-form-item v-if="form.type !== 3" label="菜单图标">
 | 
			
		||||
              <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
 | 
			
		||||
                <IconSelect ref="iconSelect" @selected="selected" />
 | 
			
		||||
@@ -88,319 +200,414 @@
 | 
			
		||||
              </el-popover>
 | 
			
		||||
            </el-form-item>
 | 
			
		||||
          </el-col> -->
 | 
			
		||||
          <el-col :span="12">
 | 
			
		||||
            <el-form-item label="菜单名称" prop="name">
 | 
			
		||||
              <el-input v-model="form.name" placeholder="请输入菜单名称" />
 | 
			
		||||
            </el-form-item>
 | 
			
		||||
          </el-col>
 | 
			
		||||
          <el-col :span="12">
 | 
			
		||||
            <el-form-item label="显示排序" prop="sort">
 | 
			
		||||
              <el-input-number v-model="form.sort" controls-position="right" :min="0" />
 | 
			
		||||
            </el-form-item>
 | 
			
		||||
          </el-col>
 | 
			
		||||
          <el-col :span="12">
 | 
			
		||||
            <el-form-item v-if="form.type !== 3" label="路由地址" prop="path">
 | 
			
		||||
              <span slot="label">
 | 
			
		||||
                <el-tooltip content="访问的路由地址,如:`user`。如需外网地址时,则以 `http(s)://` 开头" placement="top">
 | 
			
		||||
                <i class="el-icon-question" />
 | 
			
		||||
                </el-tooltip>
 | 
			
		||||
                路由地址
 | 
			
		||||
              </span>
 | 
			
		||||
              <el-input v-model="form.path" placeholder="请输入路由地址" />
 | 
			
		||||
            </el-form-item>
 | 
			
		||||
          </el-col>
 | 
			
		||||
					<el-col :span="12">
 | 
			
		||||
						<el-form-item v-if="form.type !== 1" label="权限标识">
 | 
			
		||||
              <span slot="label">
 | 
			
		||||
                <el-tooltip content="Controller 方法上的权限字符,如:@PreAuthorize(`@ss.hasPermission('system:user:list')`)" placement="top">
 | 
			
		||||
                  <i class="el-icon-question" />
 | 
			
		||||
                </el-tooltip>
 | 
			
		||||
                权限字符
 | 
			
		||||
              </span>
 | 
			
		||||
							<el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
 | 
			
		||||
						<el-form-item
 | 
			
		||||
							label="菜单名称"
 | 
			
		||||
							prop="name">
 | 
			
		||||
							<el-input
 | 
			
		||||
								v-model="form.name"
 | 
			
		||||
								placeholder="请输入菜单名称" />
 | 
			
		||||
						</el-form-item>
 | 
			
		||||
					</el-col>
 | 
			
		||||
          <el-col :span="12" v-if="form.type === 2">
 | 
			
		||||
            <el-form-item label="组件路径" prop="component">
 | 
			
		||||
              <el-input v-model="form.component" placeholder="例如说:system/user/index" />
 | 
			
		||||
            </el-form-item>
 | 
			
		||||
          </el-col>
 | 
			
		||||
					<el-col :span="12" v-if="form.type === 2">
 | 
			
		||||
						<el-form-item label="组件名称" prop="componentName">
 | 
			
		||||
							<el-input v-model="form.componentName" placeholder="例如说:SystemUser" />
 | 
			
		||||
					<el-col :span="12">
 | 
			
		||||
						<el-form-item
 | 
			
		||||
							label="显示排序"
 | 
			
		||||
							prop="sort">
 | 
			
		||||
							<el-input-number
 | 
			
		||||
								v-model="form.sort"
 | 
			
		||||
								controls-position="right"
 | 
			
		||||
								:min="0" />
 | 
			
		||||
						</el-form-item>
 | 
			
		||||
					</el-col>
 | 
			
		||||
          <el-col :span="12">
 | 
			
		||||
            <el-form-item label="菜单状态" prop="status">
 | 
			
		||||
              <span slot="label">
 | 
			
		||||
                <el-tooltip content="选择停用时,路由将不会出现在侧边栏,也不能被访问" placement="top">
 | 
			
		||||
                  <i class="el-icon-question" />
 | 
			
		||||
                </el-tooltip>
 | 
			
		||||
                菜单状态
 | 
			
		||||
              </span>
 | 
			
		||||
              <el-radio-group v-model="form.status">
 | 
			
		||||
                <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
 | 
			
		||||
                          :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
 | 
			
		||||
              </el-radio-group>
 | 
			
		||||
            </el-form-item>
 | 
			
		||||
          </el-col>
 | 
			
		||||
          <el-col :span="12">
 | 
			
		||||
            <el-form-item v-if="form.type !== 3" label="显示状态">
 | 
			
		||||
              <span slot="label">
 | 
			
		||||
                <el-tooltip content="选择隐藏时,路由将不会出现在侧边栏,但仍然可以访问" placement="top">
 | 
			
		||||
                  <i class="el-icon-question" />
 | 
			
		||||
                </el-tooltip>
 | 
			
		||||
                是否显示
 | 
			
		||||
              </span>
 | 
			
		||||
              <el-radio-group v-model="form.visible">
 | 
			
		||||
                <el-radio :key="true" :label="true">显示</el-radio>
 | 
			
		||||
                <el-radio :key="false" :label="false">隐藏</el-radio>
 | 
			
		||||
              </el-radio-group>
 | 
			
		||||
            </el-form-item>
 | 
			
		||||
          </el-col>
 | 
			
		||||
          <el-col :span="12">
 | 
			
		||||
            <el-form-item v-if="form.type !== 3" label="总是显示">
 | 
			
		||||
              <span slot="label">
 | 
			
		||||
                <el-tooltip content="选择不是时,当该菜单只有一个子菜单时,不展示自己,直接展示子菜单" placement="top">
 | 
			
		||||
                  <i class="el-icon-question" />
 | 
			
		||||
                </el-tooltip>
 | 
			
		||||
                 总是显示
 | 
			
		||||
              </span>
 | 
			
		||||
              <el-radio-group v-model="form.alwaysShow">
 | 
			
		||||
                <el-radio :key="true" :label="true">总是</el-radio>
 | 
			
		||||
                <el-radio :key="false" :label="false">不是</el-radio>
 | 
			
		||||
              </el-radio-group>
 | 
			
		||||
            </el-form-item>
 | 
			
		||||
          </el-col>
 | 
			
		||||
					<el-col :span="12">
 | 
			
		||||
						<el-form-item v-if="form.type === 2" label="是否缓存">
 | 
			
		||||
              <span slot="label">
 | 
			
		||||
                <el-tooltip content="选择缓存时,则会被 `keep-alive` 缓存,必须填写「组件名称」字段" placement="top">
 | 
			
		||||
                  <i class="el-icon-question" />
 | 
			
		||||
                </el-tooltip>
 | 
			
		||||
                 是否缓存
 | 
			
		||||
              </span>
 | 
			
		||||
							<el-radio-group v-model="form.keepAlive">
 | 
			
		||||
								<el-radio :key="true" :label="true">缓存</el-radio>
 | 
			
		||||
								<el-radio :key="false" :label="false">不缓存</el-radio>
 | 
			
		||||
						<el-form-item
 | 
			
		||||
							v-if="form.type !== 3"
 | 
			
		||||
							label="路由地址"
 | 
			
		||||
							prop="path">
 | 
			
		||||
							<span slot="label">
 | 
			
		||||
								<el-tooltip
 | 
			
		||||
									content="访问的路由地址,如:`user`。如需外网地址时,则以 `http(s)://` 开头"
 | 
			
		||||
									placement="top">
 | 
			
		||||
									<i class="el-icon-question" />
 | 
			
		||||
								</el-tooltip>
 | 
			
		||||
								路由地址
 | 
			
		||||
							</span>
 | 
			
		||||
							<el-input
 | 
			
		||||
								v-model="form.path"
 | 
			
		||||
								placeholder="请输入路由地址" />
 | 
			
		||||
						</el-form-item>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="12">
 | 
			
		||||
						<el-form-item
 | 
			
		||||
							v-if="form.type !== 1"
 | 
			
		||||
							label="权限标识">
 | 
			
		||||
							<span slot="label">
 | 
			
		||||
								<el-tooltip
 | 
			
		||||
									content="Controller 方法上的权限字符,如:@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
 | 
			
		||||
									placement="top">
 | 
			
		||||
									<i class="el-icon-question" />
 | 
			
		||||
								</el-tooltip>
 | 
			
		||||
								权限字符
 | 
			
		||||
							</span>
 | 
			
		||||
							<el-input
 | 
			
		||||
								v-model="form.permission"
 | 
			
		||||
								placeholder="请权限标识"
 | 
			
		||||
								maxlength="200" />
 | 
			
		||||
						</el-form-item>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col
 | 
			
		||||
						:span="12"
 | 
			
		||||
						v-if="form.type === 2">
 | 
			
		||||
						<el-form-item
 | 
			
		||||
							label="组件路径"
 | 
			
		||||
							prop="component">
 | 
			
		||||
							<el-input
 | 
			
		||||
								v-model="form.component"
 | 
			
		||||
								placeholder="例如说:system/user/index" />
 | 
			
		||||
						</el-form-item>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col
 | 
			
		||||
						:span="12"
 | 
			
		||||
						v-if="form.type === 2">
 | 
			
		||||
						<el-form-item
 | 
			
		||||
							label="组件名称"
 | 
			
		||||
							prop="componentName">
 | 
			
		||||
							<el-input
 | 
			
		||||
								v-model="form.componentName"
 | 
			
		||||
								placeholder="例如说:SystemUser" />
 | 
			
		||||
						</el-form-item>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="12">
 | 
			
		||||
						<el-form-item
 | 
			
		||||
							label="菜单状态"
 | 
			
		||||
							prop="status">
 | 
			
		||||
							<span slot="label">
 | 
			
		||||
								<el-tooltip
 | 
			
		||||
									content="选择停用时,路由将不会出现在侧边栏,也不能被访问"
 | 
			
		||||
									placement="top">
 | 
			
		||||
									<i class="el-icon-question" />
 | 
			
		||||
								</el-tooltip>
 | 
			
		||||
								菜单状态
 | 
			
		||||
							</span>
 | 
			
		||||
							<el-radio-group v-model="form.status">
 | 
			
		||||
								<el-radio
 | 
			
		||||
									v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
 | 
			
		||||
									:key="dict.value"
 | 
			
		||||
									:label="parseInt(dict.value)">
 | 
			
		||||
									{{ dict.label }}
 | 
			
		||||
								</el-radio>
 | 
			
		||||
							</el-radio-group>
 | 
			
		||||
						</el-form-item>
 | 
			
		||||
					</el-col>
 | 
			
		||||
        </el-row>
 | 
			
		||||
      </el-form>
 | 
			
		||||
      <div slot="footer" class="dialog-footer">
 | 
			
		||||
        <el-button type="primary" @click="submitForm">确 定</el-button>
 | 
			
		||||
        <el-button @click="cancel">取 消</el-button>
 | 
			
		||||
      </div>
 | 
			
		||||
    </el-dialog>
 | 
			
		||||
  </div>
 | 
			
		||||
					<el-col :span="12">
 | 
			
		||||
						<el-form-item
 | 
			
		||||
							v-if="form.type !== 3"
 | 
			
		||||
							label="显示状态">
 | 
			
		||||
							<span slot="label">
 | 
			
		||||
								<el-tooltip
 | 
			
		||||
									content="选择隐藏时,路由将不会出现在侧边栏,但仍然可以访问"
 | 
			
		||||
									placement="top">
 | 
			
		||||
									<i class="el-icon-question" />
 | 
			
		||||
								</el-tooltip>
 | 
			
		||||
								是否显示
 | 
			
		||||
							</span>
 | 
			
		||||
							<el-radio-group v-model="form.visible">
 | 
			
		||||
								<el-radio
 | 
			
		||||
									:key="true"
 | 
			
		||||
									:label="true">
 | 
			
		||||
									显示
 | 
			
		||||
								</el-radio>
 | 
			
		||||
								<el-radio
 | 
			
		||||
									:key="false"
 | 
			
		||||
									:label="false">
 | 
			
		||||
									隐藏
 | 
			
		||||
								</el-radio>
 | 
			
		||||
							</el-radio-group>
 | 
			
		||||
						</el-form-item>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="12">
 | 
			
		||||
						<el-form-item
 | 
			
		||||
							v-if="form.type !== 3"
 | 
			
		||||
							label="总是显示">
 | 
			
		||||
							<span slot="label">
 | 
			
		||||
								<el-tooltip
 | 
			
		||||
									content="选择不是时,当该菜单只有一个子菜单时,不展示自己,直接展示子菜单"
 | 
			
		||||
									placement="top">
 | 
			
		||||
									<i class="el-icon-question" />
 | 
			
		||||
								</el-tooltip>
 | 
			
		||||
								总是显示
 | 
			
		||||
							</span>
 | 
			
		||||
							<el-radio-group v-model="form.alwaysShow">
 | 
			
		||||
								<el-radio
 | 
			
		||||
									:key="true"
 | 
			
		||||
									:label="true">
 | 
			
		||||
									总是
 | 
			
		||||
								</el-radio>
 | 
			
		||||
								<el-radio
 | 
			
		||||
									:key="false"
 | 
			
		||||
									:label="false">
 | 
			
		||||
									不是
 | 
			
		||||
								</el-radio>
 | 
			
		||||
							</el-radio-group>
 | 
			
		||||
						</el-form-item>
 | 
			
		||||
					</el-col>
 | 
			
		||||
					<el-col :span="12">
 | 
			
		||||
						<el-form-item
 | 
			
		||||
							v-if="form.type === 2"
 | 
			
		||||
							label="是否缓存">
 | 
			
		||||
							<span slot="label">
 | 
			
		||||
								<el-tooltip
 | 
			
		||||
									content="选择缓存时,则会被 `keep-alive` 缓存,必须填写「组件名称」字段"
 | 
			
		||||
									placement="top">
 | 
			
		||||
									<i class="el-icon-question" />
 | 
			
		||||
								</el-tooltip>
 | 
			
		||||
								是否缓存
 | 
			
		||||
							</span>
 | 
			
		||||
							<el-radio-group v-model="form.keepAlive">
 | 
			
		||||
								<el-radio
 | 
			
		||||
									:key="true"
 | 
			
		||||
									:label="true">
 | 
			
		||||
									缓存
 | 
			
		||||
								</el-radio>
 | 
			
		||||
								<el-radio
 | 
			
		||||
									:key="false"
 | 
			
		||||
									:label="false">
 | 
			
		||||
									不缓存
 | 
			
		||||
								</el-radio>
 | 
			
		||||
							</el-radio-group>
 | 
			
		||||
						</el-form-item>
 | 
			
		||||
					</el-col>
 | 
			
		||||
				</el-row>
 | 
			
		||||
			</el-form>
 | 
			
		||||
			<div
 | 
			
		||||
				slot="footer"
 | 
			
		||||
				class="dialog-footer">
 | 
			
		||||
				<el-button
 | 
			
		||||
					type="primary"
 | 
			
		||||
					@click="submitForm">
 | 
			
		||||
					确 定
 | 
			
		||||
				</el-button>
 | 
			
		||||
				<el-button @click="cancel">取 消</el-button>
 | 
			
		||||
			</div>
 | 
			
		||||
		</el-dialog>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
 | 
			
		||||
import Treeselect from "@riophae/vue-treeselect";
 | 
			
		||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 | 
			
		||||
import IconSelect from "@/components/IconSelect";
 | 
			
		||||
import {
 | 
			
		||||
	listMenu,
 | 
			
		||||
	getMenu,
 | 
			
		||||
	delMenu,
 | 
			
		||||
	addMenu,
 | 
			
		||||
	updateMenu,
 | 
			
		||||
} from '@/api/system/menu';
 | 
			
		||||
import Treeselect from '@riophae/vue-treeselect';
 | 
			
		||||
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
 | 
			
		||||
import IconSelect from '@/components/IconSelect';
 | 
			
		||||
 | 
			
		||||
import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
 | 
			
		||||
import { getDictDatas, DICT_TYPE } from '@/utils/dict'
 | 
			
		||||
import {isExternal} from "@/utils/validate";
 | 
			
		||||
import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants';
 | 
			
		||||
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
 | 
			
		||||
import { isExternal } from '@/utils/validate';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: "SystemMenu",
 | 
			
		||||
  components: { Treeselect, IconSelect },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      // 遮罩层
 | 
			
		||||
      loading: true,
 | 
			
		||||
      // 显示搜索条件
 | 
			
		||||
      showSearch: true,
 | 
			
		||||
      // 菜单表格树数据
 | 
			
		||||
      menuList: [],
 | 
			
		||||
      // 菜单树选项
 | 
			
		||||
      menuOptions: [],
 | 
			
		||||
      // 弹出层标题
 | 
			
		||||
      title: "",
 | 
			
		||||
      // 是否显示弹出层
 | 
			
		||||
      open: false,
 | 
			
		||||
      // 是否展开,默认全部折叠
 | 
			
		||||
      isExpandAll: false,
 | 
			
		||||
      // 重新渲染表格状态
 | 
			
		||||
      refreshTable: true,
 | 
			
		||||
      // 查询参数
 | 
			
		||||
      queryParams: {
 | 
			
		||||
        name: undefined,
 | 
			
		||||
        visible: undefined
 | 
			
		||||
      },
 | 
			
		||||
      // 表单参数
 | 
			
		||||
      form: {},
 | 
			
		||||
      // 表单校验
 | 
			
		||||
      rules: {
 | 
			
		||||
        name: [
 | 
			
		||||
          { required: true, message: "菜单名称不能为空", trigger: "blur" }
 | 
			
		||||
        ],
 | 
			
		||||
        sort: [
 | 
			
		||||
          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
 | 
			
		||||
        ],
 | 
			
		||||
        path: [
 | 
			
		||||
          { required: true, message: "路由地址不能为空", trigger: "blur" }
 | 
			
		||||
        ],
 | 
			
		||||
        status: [
 | 
			
		||||
          { required: true, message: "状态不能为空", trigger: "blur" }
 | 
			
		||||
        ]
 | 
			
		||||
      },
 | 
			
		||||
	name: 'SystemMenu',
 | 
			
		||||
	components: { Treeselect, IconSelect },
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			// 遮罩层
 | 
			
		||||
			loading: true,
 | 
			
		||||
			// 显示搜索条件
 | 
			
		||||
			showSearch: true,
 | 
			
		||||
			// 菜单表格树数据
 | 
			
		||||
			menuList: [],
 | 
			
		||||
			// 菜单树选项
 | 
			
		||||
			menuOptions: [],
 | 
			
		||||
			// 弹出层标题
 | 
			
		||||
			title: '',
 | 
			
		||||
			// 是否显示弹出层
 | 
			
		||||
			open: false,
 | 
			
		||||
			// 是否展开,默认全部折叠
 | 
			
		||||
			isExpandAll: false,
 | 
			
		||||
			// 重新渲染表格状态
 | 
			
		||||
			refreshTable: true,
 | 
			
		||||
			// 查询参数
 | 
			
		||||
			queryParams: {
 | 
			
		||||
				name: undefined,
 | 
			
		||||
				visible: undefined,
 | 
			
		||||
			},
 | 
			
		||||
			// 表单参数
 | 
			
		||||
			form: {},
 | 
			
		||||
			// 表单校验
 | 
			
		||||
			rules: {
 | 
			
		||||
				name: [
 | 
			
		||||
					{ required: true, message: '菜单名称不能为空', trigger: 'blur' },
 | 
			
		||||
				],
 | 
			
		||||
				sort: [
 | 
			
		||||
					{ required: true, message: '菜单顺序不能为空', trigger: 'blur' },
 | 
			
		||||
				],
 | 
			
		||||
				path: [
 | 
			
		||||
					{ required: true, message: '路由地址不能为空', trigger: 'blur' },
 | 
			
		||||
				],
 | 
			
		||||
				status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
 | 
			
		||||
			},
 | 
			
		||||
 | 
			
		||||
      // 枚举
 | 
			
		||||
      MenuTypeEnum: SystemMenuTypeEnum,
 | 
			
		||||
      CommonStatusEnum: CommonStatusEnum,
 | 
			
		||||
      // 数据字典
 | 
			
		||||
      menuTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_MENU_TYPE),
 | 
			
		||||
      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
  created() {
 | 
			
		||||
    this.getList();
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    // 选择图标
 | 
			
		||||
    // selected(name) {
 | 
			
		||||
    //   this.form.icon = name;
 | 
			
		||||
    // },
 | 
			
		||||
    /** 查询菜单列表 */
 | 
			
		||||
    getList() {
 | 
			
		||||
      this.loading = true;
 | 
			
		||||
      listMenu(this.queryParams).then(response => {
 | 
			
		||||
        this.menuList = this.handleTree(response.data, "id");
 | 
			
		||||
        this.loading = false;
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    /** 转换菜单数据结构 */
 | 
			
		||||
    normalizer(node) {
 | 
			
		||||
      if (node.children && !node.children.length) {
 | 
			
		||||
        delete node.children;
 | 
			
		||||
      }
 | 
			
		||||
      return {
 | 
			
		||||
        id: node.id,
 | 
			
		||||
        label: node.name,
 | 
			
		||||
        children: node.children
 | 
			
		||||
      };
 | 
			
		||||
    },
 | 
			
		||||
    /** 查询菜单下拉树结构 */
 | 
			
		||||
    getTreeselect() {
 | 
			
		||||
      listMenu().then(response => {
 | 
			
		||||
        this.menuOptions = [];
 | 
			
		||||
        const menu = { id: 0, name: '主类目', children: [] };
 | 
			
		||||
        menu.children = this.handleTree(response.data, "id");
 | 
			
		||||
        this.menuOptions.push(menu);
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    // 取消按钮
 | 
			
		||||
    cancel() {
 | 
			
		||||
      this.open = false;
 | 
			
		||||
      this.reset();
 | 
			
		||||
    },
 | 
			
		||||
    // 表单重置
 | 
			
		||||
    reset() {
 | 
			
		||||
      this.form = {
 | 
			
		||||
        id: undefined,
 | 
			
		||||
        parentId: 0,
 | 
			
		||||
        name: undefined,
 | 
			
		||||
        // icon: undefined,
 | 
			
		||||
        type: SystemMenuTypeEnum.DIR,
 | 
			
		||||
        sort: undefined,
 | 
			
		||||
        status: CommonStatusEnum.ENABLE,
 | 
			
		||||
        visible: true,
 | 
			
		||||
        keepAlive: true,
 | 
			
		||||
        alwaysShow: true,
 | 
			
		||||
      };
 | 
			
		||||
      this.resetForm("form");
 | 
			
		||||
    },
 | 
			
		||||
    /** 搜索按钮操作 */
 | 
			
		||||
    handleQuery() {
 | 
			
		||||
      this.getList();
 | 
			
		||||
    },
 | 
			
		||||
    /** 重置按钮操作 */
 | 
			
		||||
    resetQuery() {
 | 
			
		||||
      this.resetForm("queryForm");
 | 
			
		||||
      this.handleQuery();
 | 
			
		||||
    },
 | 
			
		||||
    /** 展开/折叠操作 */
 | 
			
		||||
    toggleExpandAll() {
 | 
			
		||||
      this.refreshTable = false;
 | 
			
		||||
      this.isExpandAll = !this.isExpandAll;
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        this.refreshTable = true;
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    /** 新增按钮操作 */
 | 
			
		||||
    handleAdd(row) {
 | 
			
		||||
      this.reset();
 | 
			
		||||
      this.getTreeselect();
 | 
			
		||||
      if (row != null && row.id) {
 | 
			
		||||
        this.form.parentId = row.id;
 | 
			
		||||
      } else {
 | 
			
		||||
        this.form.parentId = 0;
 | 
			
		||||
      }
 | 
			
		||||
      this.open = true;
 | 
			
		||||
      this.title = "添加菜单";
 | 
			
		||||
    },
 | 
			
		||||
    /** 修改按钮操作 */
 | 
			
		||||
    handleUpdate(row) {
 | 
			
		||||
      this.reset();
 | 
			
		||||
      this.getTreeselect();
 | 
			
		||||
      getMenu(row.id).then(response => {
 | 
			
		||||
        this.form = response.data;
 | 
			
		||||
        this.open = true;
 | 
			
		||||
        this.title = "修改菜单";
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    /** 提交按钮 */
 | 
			
		||||
    submitForm: function() {
 | 
			
		||||
      this.$refs["form"].validate(valid => {
 | 
			
		||||
        if (valid) {
 | 
			
		||||
          // 若权限类型为目录或者菜单时,进行 path 的校验,避免后续拼接出来的路由无法跳转
 | 
			
		||||
          if (this.form.type === SystemMenuTypeEnum.DIR
 | 
			
		||||
            || this.form.type === SystemMenuTypeEnum.MENU) {
 | 
			
		||||
            // 如果是外链,则不进行校验
 | 
			
		||||
            const path = this.form.path
 | 
			
		||||
            if (!isExternal(path)) {
 | 
			
		||||
              // 父权限为根节点,path 必须以 / 开头
 | 
			
		||||
              if (this.form.parentId === 0 && path.charAt(0) !== '/') {
 | 
			
		||||
                this.$modal.msgSuccess('前端必须以 / 开头')
 | 
			
		||||
                return
 | 
			
		||||
              } else if (this.form.parentId !== 0 && path.charAt(0) === '/') {
 | 
			
		||||
                this.$modal.msgSuccess('前端不能以 / 开头')
 | 
			
		||||
                return
 | 
			
		||||
              }
 | 
			
		||||
            }
 | 
			
		||||
          }
 | 
			
		||||
			// 枚举
 | 
			
		||||
			MenuTypeEnum: SystemMenuTypeEnum,
 | 
			
		||||
			CommonStatusEnum: CommonStatusEnum,
 | 
			
		||||
			// 数据字典
 | 
			
		||||
			menuTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_MENU_TYPE),
 | 
			
		||||
			statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {
 | 
			
		||||
		this.getList();
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		// 选择图标
 | 
			
		||||
		// selected(name) {
 | 
			
		||||
		//   this.form.icon = name;
 | 
			
		||||
		// },
 | 
			
		||||
		/** 查询菜单列表 */
 | 
			
		||||
		getList() {
 | 
			
		||||
			this.loading = true;
 | 
			
		||||
			listMenu(this.queryParams).then((response) => {
 | 
			
		||||
				this.menuList = this.handleTree(response.data, 'id');
 | 
			
		||||
				this.loading = false;
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		/** 转换菜单数据结构 */
 | 
			
		||||
		normalizer(node) {
 | 
			
		||||
			if (node.children && !node.children.length) {
 | 
			
		||||
				delete node.children;
 | 
			
		||||
			}
 | 
			
		||||
			return {
 | 
			
		||||
				id: node.id,
 | 
			
		||||
				label: node.name,
 | 
			
		||||
				children: node.children,
 | 
			
		||||
			};
 | 
			
		||||
		},
 | 
			
		||||
		/** 查询菜单下拉树结构 */
 | 
			
		||||
		getTreeselect() {
 | 
			
		||||
			listMenu().then((response) => {
 | 
			
		||||
				this.menuOptions = [];
 | 
			
		||||
				const menu = { id: 0, name: '主类目', children: [] };
 | 
			
		||||
				menu.children = this.handleTree(response.data, 'id');
 | 
			
		||||
				this.menuOptions.push(menu);
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		// 取消按钮
 | 
			
		||||
		cancel() {
 | 
			
		||||
			this.open = false;
 | 
			
		||||
			this.reset();
 | 
			
		||||
		},
 | 
			
		||||
		// 表单重置
 | 
			
		||||
		reset() {
 | 
			
		||||
			this.form = {
 | 
			
		||||
				id: undefined,
 | 
			
		||||
				parentId: 0,
 | 
			
		||||
				name: undefined,
 | 
			
		||||
				// icon: undefined,
 | 
			
		||||
				type: SystemMenuTypeEnum.DIR,
 | 
			
		||||
				sort: undefined,
 | 
			
		||||
				status: CommonStatusEnum.ENABLE,
 | 
			
		||||
				visible: true,
 | 
			
		||||
				keepAlive: true,
 | 
			
		||||
				alwaysShow: true,
 | 
			
		||||
			};
 | 
			
		||||
			this.resetForm('form');
 | 
			
		||||
		},
 | 
			
		||||
		/** 搜索按钮操作 */
 | 
			
		||||
		handleQuery() {
 | 
			
		||||
			this.getList();
 | 
			
		||||
		},
 | 
			
		||||
		/** 重置按钮操作 */
 | 
			
		||||
		resetQuery() {
 | 
			
		||||
			this.resetForm('queryForm');
 | 
			
		||||
			this.handleQuery();
 | 
			
		||||
		},
 | 
			
		||||
		/** 展开/折叠操作 */
 | 
			
		||||
		toggleExpandAll() {
 | 
			
		||||
			this.refreshTable = false;
 | 
			
		||||
			this.isExpandAll = !this.isExpandAll;
 | 
			
		||||
			this.$nextTick(() => {
 | 
			
		||||
				this.refreshTable = true;
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		/** 新增按钮操作 */
 | 
			
		||||
		handleAdd(row) {
 | 
			
		||||
			this.reset();
 | 
			
		||||
			this.getTreeselect();
 | 
			
		||||
			if (row != null && row.id) {
 | 
			
		||||
				this.form.parentId = row.id;
 | 
			
		||||
			} else {
 | 
			
		||||
				this.form.parentId = 0;
 | 
			
		||||
			}
 | 
			
		||||
			this.open = true;
 | 
			
		||||
			this.title = '添加菜单';
 | 
			
		||||
		},
 | 
			
		||||
		/** 修改按钮操作 */
 | 
			
		||||
		handleUpdate(row) {
 | 
			
		||||
			this.reset();
 | 
			
		||||
			this.getTreeselect();
 | 
			
		||||
			getMenu(row.id).then((response) => {
 | 
			
		||||
				this.form = response.data;
 | 
			
		||||
				this.open = true;
 | 
			
		||||
				this.title = '修改菜单';
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		/** 提交按钮 */
 | 
			
		||||
		submitForm: function () {
 | 
			
		||||
			this.$refs['form'].validate((valid) => {
 | 
			
		||||
				if (valid) {
 | 
			
		||||
					// 若权限类型为目录或者菜单时,进行 path 的校验,避免后续拼接出来的路由无法跳转
 | 
			
		||||
					if (
 | 
			
		||||
						this.form.type === SystemMenuTypeEnum.DIR ||
 | 
			
		||||
						this.form.type === SystemMenuTypeEnum.MENU
 | 
			
		||||
					) {
 | 
			
		||||
						// 如果是外链,则不进行校验
 | 
			
		||||
						const path = this.form.path;
 | 
			
		||||
						if (!isExternal(path)) {
 | 
			
		||||
							// 父权限为根节点,path 必须以 / 开头
 | 
			
		||||
							if (this.form.parentId === 0 && path.charAt(0) !== '/') {
 | 
			
		||||
								this.$modal.msgSuccess('前端必须以 / 开头');
 | 
			
		||||
								return;
 | 
			
		||||
							} else if (this.form.parentId !== 0 && path.charAt(0) === '/') {
 | 
			
		||||
								this.$modal.msgSuccess('前端不能以 / 开头');
 | 
			
		||||
								return;
 | 
			
		||||
							}
 | 
			
		||||
						}
 | 
			
		||||
					}
 | 
			
		||||
 | 
			
		||||
          // 提交
 | 
			
		||||
          if (this.form.id !== undefined) {
 | 
			
		||||
            updateMenu(this.form).then(response => {
 | 
			
		||||
              this.$modal.msgSuccess("修改成功");
 | 
			
		||||
              this.open = false;
 | 
			
		||||
              this.getList();
 | 
			
		||||
            });
 | 
			
		||||
          } else {
 | 
			
		||||
            addMenu(this.form).then(response => {
 | 
			
		||||
              this.$modal.msgSuccess("新增成功");
 | 
			
		||||
              this.open = false;
 | 
			
		||||
              this.getList();
 | 
			
		||||
            });
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    /** 删除按钮操作 */
 | 
			
		||||
    handleDelete(row) {
 | 
			
		||||
      this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function() {
 | 
			
		||||
          return delMenu(row.id);
 | 
			
		||||
        }).then(() => {
 | 
			
		||||
          this.getList();
 | 
			
		||||
          this.$modal.msgSuccess("删除成功");
 | 
			
		||||
      }).catch(() => {});
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
					// 提交
 | 
			
		||||
					if (this.form.id !== undefined) {
 | 
			
		||||
						updateMenu(this.form).then((response) => {
 | 
			
		||||
							this.$modal.msgSuccess('修改成功');
 | 
			
		||||
							this.open = false;
 | 
			
		||||
							this.getList();
 | 
			
		||||
						});
 | 
			
		||||
					} else {
 | 
			
		||||
						addMenu(this.form).then((response) => {
 | 
			
		||||
							this.$modal.msgSuccess('新增成功');
 | 
			
		||||
							this.open = false;
 | 
			
		||||
							this.getList();
 | 
			
		||||
						});
 | 
			
		||||
					}
 | 
			
		||||
				}
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		/** 删除按钮操作 */
 | 
			
		||||
		handleDelete(row) {
 | 
			
		||||
			this.$modal
 | 
			
		||||
				.confirm('是否确认删除名称为"' + row.name + '"的数据项?')
 | 
			
		||||
				.then(function () {
 | 
			
		||||
					return delMenu(row.id);
 | 
			
		||||
				})
 | 
			
		||||
				.then(() => {
 | 
			
		||||
					this.getList();
 | 
			
		||||
					this.$modal.msgSuccess('删除成功');
 | 
			
		||||
				})
 | 
			
		||||
				.catch(() => {});
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user