给整改期限输入方式改为自动获取当前时间
时间: 2024-12-13 07:24:41 浏览: 5
为了将“整改期限”字段的输入方式改为自动获取当前时间,可以在 Vue 组件的 `mounted` 钩子或 `onLoad` 方法中初始化 `editableData.CORRE_DDL` 属性为当前日期。以下是具体的实现步骤:
1. **在 `mounted` 或 `onLoad` 方法中设置默认值**:
- 在组件挂载或加载时,将 `editableData.CORRE_DDL` 设置为当前日期。
2. **使用 `Date` 对象生成当前日期**:
- 使用 JavaScript 的 `Date` 对象来获取当前日期,并将其格式化为所需的日期格式。
以下是修改后的代码示例:
```vue
<template>
<div class="container">
<div v-if="dataLoaded" class="form-container">
<!-- 表单部分 -->
<u-form ref="editableData">
<!-- 其他表单项省略 -->
<u-form-item label="整改期限:" prop="CORRE_DDL">
<u-input v-model="editableData.CORRE_DDL" readonly></u-input>
</u-form-item>
<!-- 提交按钮 -->
<button type="submit" @click.prevent="handleSubmit" class="submit-button">保存</button>
</u-form>
</div>
</div>
</template>
<script>
import request from '@/utils/request';
import { getToken } from '@/utils/auth';
export default {
data() {
return {
data: null,
editableData: {
CHECK_TIME: '',
CHECK_TYPE: '',
CHECK_PER: '',
CHECK_AREA: '',
CORRE_PER: '',
ACCOUNT_UNIT: '',
DANGER_GRADE: "一般隐患",
CORRE_TYPE: '',
CORRE_MEAS: '',
CORRE_DDL: '', // 初始化为空
CORRE_FINTIME: '',
},
fileList: [],
dataLoaded: false,
selectedRecordId: null, // 用于存储从上一个页面传递的记录ID
};
},
methods: {
radioGroupChange(e) {
// console.log(e);
// console.log(this.editableData.DANGER_GRADE)
},
async afterRead(event) {
let lists = [].concat(event.file);
let fileListLen = this[`fileList${event.name}`].length;
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
});
});
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url);
let parsedResult = JSON.parse(result);
let item = this[`fileList${event.name}`][fileListLen];
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: parsedResult.data
}));
fileListLen++;
}
console.log(this.fileList);
},
deletePic(e) {
this['fileList'].splice(0, 1);
},
uploadFilePromise(url) {
const header = { 'Authorization': `Bearer ${getToken()}` };
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: 'http://10.118.50.18:8001/api/danger_rectify_record/upload', // 仅为示例,非真实的接口地址
filePath: url,
header: header,
name: 'fileinput',
success: (res) => {
resolve(res.data);
}
});
});
},
fetchData() {
const params = {
page: 1,
rows: 30,
sort: "DANGER_R_ID",
order: "desc",
wheres: JSON.stringify([
{ name: "ORDER_STATUS", value: "1" },
{ name: "DANGER_R_ID", value: this.selectedRecordId }
])
};
request({
url: '/api/danger_rectify_record/getPageData',
method: 'POST',
header: { 'content-type': 'application/json', 'Authorization': `Bearer ${getToken()}` },
data: params,
dataType: 'json'
}).then(response => {
this.data = response;
if (this.data.rows.length > 0) {
this.editableData = { ...this.data.rows[0] };
}
console.log(this.editableData);
this.dataLoaded = true;
}).catch(error => {
console.error(error);
uni.showToast({ title: '请求失败', icon: 'none' });
});
},
handleSubmit() {
if (this.fileList.length !== 0) {
this.editableData.CORRE_FINPIC = this.fileList[0].url;
}
const mainData = {
DANGER_R_ID: this.editableData.DANGER_R_ID,
CHECK_AREA: this.editableData.CHECK_AREA,
CHECK_PER: this.editableData.CHECK_PER,
CORRE_PER: this.editableData.CORRE_PER,
CORRE_PERID: this.editableData.CORRE_PERID,
ACCOUNT_UNIT: this.editableData.ACCOUNT_UNIT,
DANGER_GRADE: this.editableData.DANGER_GRADE,
CORRE_TYPE: this.editableData.CORRE_TYPE,
CORRE_MEAS: this.editableData.CORRE_MEAS,
CORRE_DDL: this.editableData.CORRE_DDL,
CORRE_FINPIC: this.editableData.CORRE_FINPIC
};
console.log(mainData);
request({
url: '/api/danger_rectify_record/update',
method: 'POST',
header: { 'content-type': 'application/json', 'Authorization': `Bearer ${getToken()}` },
data: { "mainData": mainData },
dataType: 'json'
}).then(response => {
console.log(response);
this.fetchData();
uni.showToast({ title: '更新成功', icon: 'success' });
}).catch(error => {
console.error(error);
uni.showToast({ title: '更新失败', icon: 'none' });
});
},
updateData() {
// 可以在这里实现更新数据的逻辑
},
},
computed: {
formattedData() {
return this.data ? JSON.stringify(this.data, null, 2) : '';
}
},
onLoad(options) {
this.selectedRecordId = options.recordId;
this.editableData.DANGER_R_ID = options.recordId;
this.editableData.CORRE_DDL = this.getCurrentDate(); // 设置当前日期
this.fetchData();
},
mounted() {
this.editableData.CORRE_DDL = this.getCurrentDate(); // 设置当前日期
this.fetchData();
},
methods: {
getCurrentDate() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
}
};
</script>
<style lang="scss">
.container {
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
.form-container {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
}
.form-group {
display: flex;
align-items: center;
margin-bottom: 15px;
label {
width: 120px;
font-weight: bold;
margin-right: 10px;
}
input[type="text"] {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
span {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
}
.submit-button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
&:hover {
background-color: #0056b3;
}
}
</style>
```
### 关键点说明:
1. **`getCurrentDate` 方法**:该方法用于生成当前日期,并将其格式化为 `YYYY-MM-DD` 格式。
2. **`onLoad` 和 `mounted` 钩子**:在这两个钩子中调用 `getCurrentDate` 方法,将 `editableData.CORRE_DDL` 设置为当前日期。
这样,当组件加载或挂载时,“整改期限”字段会自动填充为当前日期。
阅读全文