目标

shj

2022-07-06 6ccbdd84fc536b3acca422df522fade6b0092a6f

目标

 src/views/goalManagement/Goalsummary/index.vue

对比新文件
@@ -0,0 +1,199 @@
<template>
    <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="20px" class="topTitle">
        <el-row>
            <el-col :span="4">
                <el-form-item>
                    <el-input v-model="ruleForm.pass" placeholder="年度" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item>
                    <el-select v-model="ruleForm.region" placeholder="请选择责任部门">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">查询</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <div class="minCenter">
        <div class="btns">
            <p>汇总日期:2022-07-04 23:00:07</p>
            <div>
                <el-button type="primary" :icon="Download">导出</el-button>
            </div>
        </div>
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
            <el-table-column label="责任部门" align="center" >
                <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" align="center" label="安全目标指标" />
            <el-table-column property="address" label="考核指标" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="1月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="2月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="3月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="4月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="5月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="6月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="7月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="8月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="9月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="10月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="11月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="12月" align="center" show-overflow-tooltip />
            <el-table-column property="address" label="考核结果" align="center"  show-overflow-tooltip />
        </el-table>
        <div class="pages">
            <el-pagination
                v-model:currentPage="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessageBox, ElMessage, ElButton, ElInput, TabsPaneContext, FormInstance } from 'element-plus';
import { Plus, Delete, Upload, Download, Refresh, View } from '@element-plus/icons-vue';
interface User {
    date: string;
    name: string;
    address: string;
}
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
export default defineComponent({
    components: { ElButton, ElInput },
    setup() {
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        const resetForm = (formEl: FormInstance | undefined) => {
            console.log(!formEl);
            if (!formEl) return;
            formEl.resetFields();
        };
        // 下方导航与表格
        const activeName = ref('1');
        const handleClick = (tab: TabsPaneContext, event: Event) => {
            console.log(tab, event);
        };
        const formatter = (row: User, column: TableColumnCtx<User>) => {
            return row.address;
        };

        const tableData: User[] = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-08',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-06',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-07',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        const currentPage4 = ref(4);
        const pageSize4 = ref(100);
        const small = ref(false);
        const disabled = ref(false);
        const background = ref(false);
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        return {
            ruleForm,
            resetForm,
            activeName,
            handleClick,
            tableData,
            formatter,
            currentPage4,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            small,
            disabled,
            background,
            Plus,
            Delete,
            Upload,
            Download,
            Refresh,
            View,
        };
    },
});
</script>
<style scoped>
.topTitle {
    background-color: #fff;
    padding: 20px 0px 20px 0px;
    margin-bottom: 10px;
}
.minCenter {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 20px;
}
.btns {
    padding: 10px 0px 10px 0px;
    display: flex;
    justify-content: left;
}
.btns p{
    font-size: 18px;
    line-height: 40px;
    margin-right: 20px;
}
.pages {
    padding: 20px 0;
    display: flex;
    justify-content: right;
}
</style>

 src/views/goalManagement/safetyAssessment/component/Dailog.vue

对比新文件
@@ -0,0 +1,129 @@
<template>
    <el-dialog v-model="dialogVisible" title="目标分解" width="70%" draggable>
        <el-form :model="form" label-width="120px">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="安全目标指标">
                        <el-input v-model="form.name">
                            <template #append> <el-button :icon="Search" @click="daiInpt" /> </template
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="目标指标编号">
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="年度">
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="2">
                    <el-form-item label="指标值">
                        <el-input v-model="form.name" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="目标指标分解" name="1">
            </el-tab-pane>
        </el-tabs>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="70" />
            <el-table-column align="center" prop="date" label="责任部门" />
            <el-table-column align="center" prop="name" label="考核指标" />
            <el-table-column align="center" prop="address" label="制定部门" />
            <el-table-column align="center" prop="address" label="制定日期" />
            <el-table-column align="center" prop="address" label="上报值" />
            <el-table-column align="center" prop="address" label="上报时间" />
            <el-table-column align="center" prop="address" label="考核结果" />
            <el-table-column align="center" prop="address" label="考核人" />
            <el-table-column align="center" prop="address" label="考核时间" />
            <el-table-column align="center" label="操作">
                <template #default>
                    <el-button link type="primary">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="dialogVisible = false" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
  <DailogSearch ref="Shows"></DailogSearch>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { Search } from '@element-plus/icons-vue';
import DailogSearch from '../../../../components/DailogSearch/DailogSearch.vue'
export default defineComponent({
    components:{DailogSearch},
    setup() {
        const dialogVisible = ref<boolean>(false);
        const form = reactive({
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
        });
        const openDailog = (type: string, value: any, projectList: any, projectId: string) => {
            dialogVisible.value = true;
        };
        // 导航
        const activeName = ref('1');
        // 表格
        const tableData = [
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ];
        // 安全目标指标弹窗
        const Shows=ref()
        const daiInpt=()=>{
            Shows.value.openDailog()
        }
        return {
            form,
            dialogVisible,
            openDailog,
            activeName,
            tableData,
            Shows,
            daiInpt,
            Search,
        };
    },
});
</script>
<style scoped>
.el-row {
    padding: 0 0 20px 0;
}
</style>

 vite.config.ts

@@ -28,7 +28,7 @@
            open: env.VITE_OPEN,
            proxy: {
                '/gitee': {
                    target: 'https://gitee.com',
                    target: 'https://192.168.0.76:8009',
                    ws: true,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/gitee/, ''),