xuhongjie
parent
ef3dd6e9a1
commit
3d73d8b3a8
|
After Width: | Height: | Size: 999 B |
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="mainbox">
|
||||
<div class="item" v-for="(item, index) in items" :key="index"
|
||||
:class="{ 'gray-background': index % 2 === 0, 'white-background': index % 2 !== 0 }" @click="getInfo(item)">
|
||||
<div>{{ item.xmmc }}</div>
|
||||
<div>{{ item.status }}</div>
|
||||
<div style="color:#7F99DB ;">
|
||||
<span v-if="item.status === '待填报'">去填报</span>
|
||||
<span v-else-if="item.status === '审核通过'">去查看</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Daiban",
|
||||
data() {
|
||||
return {
|
||||
items: [
|
||||
{ id: 9, xmmc: '项目A', status: '待填报' },
|
||||
{ id: 9, xmmc: '项目B', status: '审核通过' },
|
||||
{ id: 9, xmmc: '项目C', status: '待填报' },
|
||||
{ id: 9, xmmc: '项目D', status: '审核通过' },
|
||||
{ id: 9, xmmc: '项目D', status: '审核通过' },
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getInfo(item) {
|
||||
this.$store.commit("SET_CRUMBS", this.$route.meta.title + "详情");
|
||||
const id = item.id;
|
||||
this.$router.push({ path: `/manage-info/${id}` });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mainbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 1rem 0 0;
|
||||
margin-top: 0.5rem;
|
||||
height: 22rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2rem 1rem;
|
||||
cursor: pointer;
|
||||
/* 添加鼠标指针样式 */
|
||||
}
|
||||
|
||||
.gray-background {
|
||||
background-color: #f5f5f5;
|
||||
/* 灰色背景 */
|
||||
}
|
||||
|
||||
.white-background {
|
||||
background-color: #ffffff;
|
||||
/* 白色背景 */
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<h2>公司项目信息填报</h2>
|
||||
<el-form :model="form" label-width="120px" label-position="left">
|
||||
<!-- 公司名称 -->
|
||||
<el-form-item label="公司名称">
|
||||
<el-input v-model="form.companyName" placeholder="XXXXXX公司" disabled />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 项目名称 -->
|
||||
<el-form-item label="项目名称" required>
|
||||
<el-input v-model="form.projectName" placeholder="请输入项目名称" />
|
||||
</el-form-item>
|
||||
|
||||
<!-- 填报类型 -->
|
||||
<el-form-item label="填报类型">
|
||||
<el-table :data="form.tableData" border style="width: 100%">
|
||||
<el-table-column prop="label" label="项目" width="200" />
|
||||
<el-table-column prop="value" label="填写内容">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.value" :placeholder="`请输入${scope.row.label}`" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
<el-button @click="cancelForm">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
companyName: "XXXXXX公司", // 公司名称
|
||||
projectName: "", // 项目名称
|
||||
tableData: [
|
||||
{ label: "危险品等级", value: "" },
|
||||
{ label: "生产火灾危险等级", value: "" },
|
||||
{ label: "设备载重", value: "" },
|
||||
{ label: "货梯要求", value: "" },
|
||||
{ label: "员工密度", value: "" },
|
||||
{ label: "加工精度", value: "" },
|
||||
{ label: "减振措施", value: "" },
|
||||
{ label: "环境保护", value: "" },
|
||||
{ label: "生产类型", value: "" },
|
||||
{ label: "层高要求", value: "" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 提交表单
|
||||
submitForm() {
|
||||
console.log("提交表单数据：", this.form);
|
||||
this.$message.success("表单提交成功！");
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form.projectName = "";
|
||||
this.form.tableData.forEach((item) => {
|
||||
item.value = "";
|
||||
});
|
||||
this.$message.info("表单已重置");
|
||||
},
|
||||
// 取消表单
|
||||
cancelForm() {
|
||||
this.$confirm("确定要取消当前操作吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
this.resetForm();
|
||||
this.$message.info("表单已取消");
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-container {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<div>123123</div>
|
||||
</template>
|
||||
Loading…
Reference in new issue