You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
364 lines
10 KiB
364 lines
10 KiB
<template>
|
|
<div class="container">
|
|
<!-- 顶部信息 -->
|
|
<div class="containertop">
|
|
<div class="topleft">
|
|
<img src="../../../assets/images/detailsicon/1.png" alt="">
|
|
<span>项目备忘录</span>
|
|
</div>
|
|
<div class="topright">
|
|
<el-button type="primary" size="medium" plain
|
|
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleAdd">
|
|
<img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="新增"
|
|
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
|
|
新增
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="descriptionsdiv">
|
|
<el-form :model="form" @submit.native.prevent="onSubmit">
|
|
<el-form-item>
|
|
<el-col :span="11">
|
|
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
|
|
style="width: 21.75rem;"></el-date-picker>
|
|
</el-col>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="descriptionsdivnext">
|
|
<!-- 渲染多个备忘录 -->
|
|
<div v-for="memo in memos" :key="memo.id" class="descriptionditem">
|
|
<div class="itemone">{{ memo.createTime }}</div>
|
|
<div class="itemtwo">{{ memo.remark }}</div>
|
|
<div class="itemthree">记录人：{{ memo.createBy }}</div>
|
|
<div class="iconguanbi" @click="handleDeleteMemo(memo.id)"> <img src="@/assets/images/icon-关闭-项目备忘录@2x.png" alt=""></div>
|
|
<div class="iconguanbi2" @click="handleEditMemo(memo)"> <img src="@/assets/images/detailsicon/icon-bj@2x.png" alt=""></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新增/编辑弹窗表单 -->
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
|
|
<el-form :model="newMemo" label-width="100px">
|
|
<el-form-item label="姓名">
|
|
<el-input v-model="newMemo.createBy" disabled></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="备忘时间">
|
|
<el-date-picker type="date" placeholder="选择日期" v-model="newMemo.createTime" disabled
|
|
style="width: 21.75rem;"></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="关键/主题字">
|
|
<el-input type="textarea" v-model="newMemo.remark" :rows="4"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
Remark: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
createBy:"",
|
|
createTime:"",
|
|
createId:0,
|
|
updateBy:"",
|
|
updateId:0,
|
|
updateTime:"",
|
|
id:0,
|
|
xmId:0,
|
|
remark:""
|
|
},
|
|
dialogVisible: false,
|
|
dialogTitle: '新增备忘录',
|
|
};
|
|
},
|
|
created() {
|
|
this.fetchMemos();
|
|
},
|
|
methods: {
|
|
onSubmit() {
|
|
console.log('submit!');
|
|
console.log(this.form);
|
|
},
|
|
// 打开新增弹窗
|
|
handleAdd() {
|
|
this.dialogTitle = '新增备忘录';
|
|
this.dialogVisible = true;
|
|
this.newMemo = {
|
|
id: null,
|
|
remark: '', // 只需要发送 remark
|
|
xmId: this.xmId, // 使用传入的 xmId
|
|
createTime: new Date().toISOString().slice(0, 10), // 设置当前时间
|
|
createBy: this.getCurrentUserName(), // 获取当前账号的名称
|
|
};
|
|
},
|
|
// 打开编辑弹窗
|
|
handleEditMemo(memo) {
|
|
if (memo) {
|
|
this.dialogTitle = '编辑备忘录';
|
|
this.dialogVisible = true;
|
|
this.newMemo = {
|
|
id: memo.id,
|
|
remark: memo.remark, // 只需要发送 remark
|
|
xmId: memo.xmId,
|
|
createTime: memo.createTime, // 使用现有时间
|
|
createBy: memo.createBy, // 使用现有姓名
|
|
};
|
|
}
|
|
},
|
|
// 删除备忘录
|
|
handleDeleteMemo(id) {
|
|
this.$confirm('此操作将永久删除该备忘录, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
deletexmmmb([id])
|
|
.then(response => {
|
|
if (response.code === 200) {
|
|
this.$message.success('删除成功!');
|
|
this.fetchMemos(); // 刷新数据
|
|
} else {
|
|
this.$message.error('删除失败!');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('删除失败', error);
|
|
this.$message.error('删除失败!');
|
|
});
|
|
}).catch(() => {
|
|
this.$message.info('已取消删除');
|
|
});
|
|
},
|
|
// 提交表单（新增/编辑）
|
|
handleSubmit() {
|
|
this.dialogVisible = false;
|
|
if (this.newMemo.id) {
|
|
// 编辑数据
|
|
updatexmmmb(this.newMemo)
|
|
.then(response => {
|
|
if (response.code === 200) {
|
|
this.$message.success('数据编辑成功！');
|
|
this.fetchMemos(); // 刷新数据
|
|
} else {
|
|
this.$message.error('数据编辑失败！');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('编辑数据失败', error);
|
|
this.$message.error('数据编辑失败！');
|
|
});
|
|
} else {
|
|
// 新增数据
|
|
addxmmmb(this.newMemo)
|
|
.then(response => {
|
|
if (response.code === 200) {
|
|
this.$message.success('数据新增成功！');
|
|
this.fetchMemos(); // 刷新数据
|
|
} else {
|
|
this.$message.error('数据新增失败！');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('新增数据失败', error);
|
|
this.$message.error('数据新增失败！');
|
|
});
|
|
}
|
|
},
|
|
// 获取当前账号的名称
|
|
getCurrentUserName() {
|
|
// 假设当前账号的名称存储在 Vuex store 中
|
|
return this.$store.state.user.name; // 根据实际情况调整
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
|
|
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.content {
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.containertop {
|
|
height: auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: .7rem 0;
|
|
border-bottom: 1px solid #E5E5E5;
|
|
padding: .5rem;
|
|
}
|
|
|
|
.topleft {
|
|
width: 8rem;
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.topleft img {
|
|
width: 0.81rem;
|
|
height: 0.81rem;
|
|
}
|
|
|
|
.topleft span {
|
|
width: auto;
|
|
height: 0.88rem;
|
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
|
font-weight: 500;
|
|
font-size: 0.88rem;
|
|
color: #3D424C;
|
|
line-height: 0.88rem;
|
|
text-align: right;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.descriptionsdiv {
|
|
width: 100%;
|
|
margin-left: 0rem;
|
|
height: auto;
|
|
}
|
|
|
|
.el-tag+.el-tag {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.button-new-tag {
|
|
margin-left: 10px;
|
|
height: 32px;
|
|
line-height: 30px;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.input-new-tag {
|
|
width: 90px;
|
|
margin-left: 10px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.descriptionsdivnext {
|
|
display: flex;
|
|
height: 8rem;
|
|
margin-top: -1rem;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.descriptionditem {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
width: 21.75rem;
|
|
height: auto;
|
|
background: #FBFCFF;
|
|
border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
|
|
border: 0.06rem solid #E6E6E6;
|
|
padding: .5rem;
|
|
position: relative;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.itemone {
|
|
width: 100%;
|
|
height: 0.88rem;
|
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
|
font-weight: 500;
|
|
font-size: 0.88rem;
|
|
color: #3D424C;
|
|
line-height: 0.88rem;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.itemtwo {
|
|
width: 100%;
|
|
height: 2rem;
|
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 0.88rem;
|
|
color: #3D424C;
|
|
line-height: 0.88rem;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.itemthree {
|
|
width: 100%;
|
|
height: 0.88rem;
|
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 0.88rem;
|
|
color: #808080;
|
|
line-height: 0.88rem;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.itemfour {
|
|
position: absolute;
|
|
bottom: 0.5rem;
|
|
right: 0.5rem;
|
|
}
|
|
|
|
.el-textarea__inner {
|
|
height: 10rem !important;
|
|
/* 固定高度 */
|
|
resize: none;
|
|
/* 禁止调整大小 */
|
|
}
|
|
|
|
.iconguanbi {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
.iconguanbi2 {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
background-color: rgba(43,98,241,0.1);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.iconguanbi2 img{
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
}
|
|
.iconguanbi img{
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
}
|
|
</style> |