修改部分全局样式

李林

2023-08-21 9222905ff817796cfb618c7e1fd5f7b768effcea

修改部分全局样式

 .env.development

@@ -2,4 +2,4 @@
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://192.168.110.254:1234/'
VUE_APP_BASE_API = 'http://localhost:1234/'

 src/App.vue

@@ -9,3 +9,62 @@
  name: 'App'
}
</script>

<style>
    #app{
        overflow: hidden !important;
    }
	
    .breadcrumb-container{
        height: 40px;
    }
    .app-main{
        margin-top: 41px !important;
    }
	
    .el-menu-item{
        width: 100%;
    }
	
    /* å…¨å±€æ¨¡æ€æ¡†æ ·å¼ */
    .el-dialog{
        border-radius: 10px;
        overflow: hidden;
    }
	
    .el-dialog__header,.el-message-box__header {
      box-sizing: border-box;
      height: 46px;
      border-bottom: 1px solid rgb(238, 238, 238);
      padding: 0px;
        padding-left: 18px;
      display: flex;
      align-items: center;
        background-color: #069cff;
    }
	
    .el-dialog__header *{
      font-size: 16px !important;
        color: #fff;
    }
	
    .el-dialog__headerbtn .el-dialog__close{
        color: #fff;
        top: -20px;
    }
	
    .el-dialog__headerbtn{
        top: initial;
    }
	
    .el-dialog__footer .el-button * {
      font-size: 14px !important;
    }
	
    .el-dialog__footer .el-button {
      height: 36px;
      border: 1px solid rgba(190, 190, 190, 0.44);
      box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
      padding: 0 14px;
    }
</style>

 src/api/url.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,7 @@
const url = {
}

export default function(Vue) {
    //添加全局API
    Vue.prototype.$url = url
}

 src/layout/components/AppMain.vue

@@ -28,12 +28,11 @@
<style lang="scss" scoped>
.app-main {
  /* 88 = navbar+baredcrumb  */
  min-height: calc(100vh - 88px);
  height: calc(100vh - 88px);
  width: 100%;
  position: relative;
  overflow: hidden;
  >div{
    min-height: calc(100vh - 88px);
    height: 100%;
    width: 100%;
  }

 src/main.js

@@ -17,6 +17,8 @@
import '@/icons' // icon
import '@/permission' // permission control

import url from './api/url.js'

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
@@ -30,11 +32,17 @@
  mockXHR()
}

Vue.prototype.HaveJson = (val) => {
    return JSON.parse(JSON.stringify(val))
}

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// å¦‚果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.use(url);

Vue.config.productionTip = false

new Vue({

 src/router/index.js

@@ -199,7 +199,7 @@
      {
        path: 'planAssignments',
        name: 'PlanAssignments',
        component: () => import('@/views/experiment/planAssignments/index'),
        component: () => import('@/views/experiment/planAssignments/plan'),
        meta: { title: '检验计划', icon: 'tree' }
      },
      {

 src/views/experiment/planAssignments/plan.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,255 @@
<style scoped>
    .plan {
        width: 100%;
    }

    .title {
        height: 60px;
        width: calc(100% - 20px);
        background-color: white;
        margin: 5px 10px;
        display: flex;
        align-items: center;
        padding: 0 30px;
    }

    .thing {
        margin: 10px;
        padding: 15px;
        background-color: white;
        height: calc(100vh - 15vh);
    }
</style>
<style>
    .plan .has-gutter tr th {
        background-color: #f5f7fa !important;
        color: #333;
    }

    .plan .cell {
        color: #333;
    }
</style>

<template>
    <div class="plan">
        <div class="title">
            <span>项目名称：</span>
            <el-input v-model="search.name" size="medium" style="width: 200px;margin-right: 20px;"></el-input>
            <span>检验时间：</span>
            <el-date-picker v-model="search.date" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" size="medium" style="margin-right: 20px;">
            </el-date-picker>
            <span>检验人：</span>
            <el-input v-model="search.userName" size="medium" style="width: 200px;margin-right: 20px;"></el-input>
            <el-button size="small" type="primary">查询</el-button>
            <el-button size="small">重置</el-button>
        </div>
        <div class="thing">
            <el-table :data="tableData" style="width: 100%;" row-key="id" default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :key="upIndex">
                <el-table-column type="index" width="50" label="序号">
                </el-table-column>
                <el-table-column prop="date" label="申请单号">
                </el-table-column>
                <el-table-column prop="name" label="检验结果">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" v-if="isIfReport(scope.row)">上报</el-button>
                        <el-button size="mini" type="warning" @click="openUpDia(scope.row)"
                            v-else-if="scope.row.insId==undefined&&scope.row.address==null">分配</el-button>
                        <el-button size="mini" type="success" @click="openUpInsDia(scope.row)"
                            v-else-if="scope.row.insId==undefined&&scope.row.name==null">检验</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="分配设备和人员" :visible.sync="upDia" width="500px" top="30vh">
            <div class="body">
                <el-row style="line-height: 46px;">
                    <el-col :span="4" style="font-size: 14px;text-align: right;">人员:</el-col>
                    <el-col :span="16" :offset="1">
                        <el-input v-model="upData.address" size="small" clearable></el-input>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitUpData">ç¡® å®š</el-button>
                <el-button @click="upDia = false">取 æ¶ˆ</el-button>
            </span>
        </el-dialog>
        <el-dialog title="检验" :visible.sync="upInsDia" width="500px">
            <div class="body" style="max-height: 50vh;overflow-y: auto;">
                <el-row style="line-height: 46px;">
                    <el-col :span="4" style="font-size: 14px;text-align: right;">样品编码：</el-col>
                    <el-col :span="8">{{upData.date}}</el-col>
                    <el-col :span="4" style="font-size: 14px;text-align: right;">样品名称：</el-col>
                    <el-col :span="8">{{upData.date}}</el-col>
                </el-row>
                <el-row style="line-height: 46px;">
                    <el-col :span="4" style="font-size: 14px;text-align: right;">检验项目：</el-col>
                    <el-col :span="8">{{upData.date}}</el-col>
                    <el-col :span="4" style="font-size: 14px;text-align: right;">单位：</el-col>
                    <el-col :span="8">{{upData.date}}</el-col>
                </el-row>
                <el-row style="line-height: 46px;">
                    <el-col :span="4" style="font-size: 14px;text-align: right;">标准值：</el-col>
                    <el-col :span="8">{{upData.date}}</el-col>
                    <el-col :span="4" style="font-size: 14px;text-align: right;">内控值：</el-col>
                    <el-col :span="8">{{upData.date}}</el-col>
                </el-row>
                <el-row style="line-height: 46px;">
                    <el-col style="text-align: right;"><el-button size="mini" @click="addRes">添加检验值</el-button></el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-table :data="upData.res" border style="width: 99.9%;" :key="upIndex2">
                            <el-table-column type="index" width="100" label="序号">
                            </el-table-column>
                            <el-table-column label="检验值">
                                <template slot-scope="scope">
                                    <el-input v-model.number="scope.row.number" size="small" clearable placeholder="请输入"
                                        @change="(val)=>scope.row.number = isNaN(val)?null:val">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="60">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text"
                                        @click.native.prevent="deleteRow(scope.$index, upData.res)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitUpData">提 äº¤</el-button>
                <el-button @click="upInsDia = false">取 æ¶ˆ</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                search: {
                    name: null,
                    date: [],
                    userName: null,
                },
                tableData: [{
                    id: 1,
                    insId: 123,
                    date: '2016-05-02',
                    name: null,
                    address: '上海市普陀区金沙江路 1518 å¼„',
                    children: [{
                        id: 33,
                        date: '2016-05-01',
                        name: null,
                        res: '[{"number": 1},{"number": 2}]',
                        address: '上海市普陀区金沙江路 1519 å¼„'
                    }, {
                        id: 34,
                        date: '2016-05-01',
                        name: null,
                        res: '[{"number": 1,"res": "不合格"},{"number": 2}]',
                        address: '上海市普陀区金沙江路 1519 å¼„'
                    }]
                }, {
                    id: 2,
                    insId: 123,
                    date: '2016-05-04',
                    name: null,
                    address: '上海市普陀区金沙江路 1517 å¼„',
                    children: []
                }, {
                    id: 3,
                    insId: 123,
                    date: '2016-05-01',
                    children: [{
                        id: 31,
                        date: '2016-05-01',
                        name: null,
                        res: '[{"number": 1},{"number": 2}]',
                        address: '上海市普陀区金沙江路 1519 å¼„'
                    }, {
                        id: 32,
                        date: '2016-05-01',
                        name: null,
                        res: '[]',
                        address: null
                    }]
                }],
                upDia: false,
                upData: {},
                upIndex: 0,
                upInsDia: false,
                upIndex2: 0
            }
        },
        mounted() {
            this.selectDataList()
        },
        methods: {
            selectDataList() {
                this.tableData.forEach(a => {
                    a.code = '[1]'
                    if (a.children != undefined) {
                        a.children.forEach(b => {
                            b.code = '[2]'
                            b.res = JSON.parse(b.res)
                        })
                    }
                })
                this.upIndex++
            },
            isIfReport(row) {
                var count = 0
                if (row.children == undefined) return false
                row.children.forEach(a => {
                    if (a.name != null && a.name != undefined) count++
                })
                return row.insId != undefined && count == row.children.length
            },
            openUpDia(row) {
                this.upDia = true
                this.upData = {
                    id: row.id,
                    address: row.address
                }
            },
            submitUpData() {
                this.tableData.forEach(a => {
                    a.children.forEach(b => {
                        if (b.id == this.upData.id) {
                            b.address = this.upData.address
                        }
                    })
                })
                this.$message.success('修改成功')
                this.upIndex++
                this.upDia = false
            },
            openUpInsDia(row) {
                this.upInsDia = true
                this.upData = this.HaveJson(row)
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            addRes() {
                this.upData.res.push({
                    "number": null
                })
                this.upIndex2++
            }
        }
    }
</script>

 src/views/home/index.vue

@@ -94,4 +94,5 @@
    }
  }
}

</style>