|
@@ -25,46 +25,51 @@
|
|
|
style="margin-bottom: 10px"
|
|
|
v-model="value"
|
|
|
type="date"
|
|
|
- placeholder="选择日期">
|
|
|
+ placeholder="选择日期"
|
|
|
+ readonly
|
|
|
+ >
|
|
|
</el-date-picker>
|
|
|
<div>
|
|
|
- <el-input placeholder="请输入标题" style="margin-bottom: 20px;width: 220px"></el-input>
|
|
|
+ <el-input v-model="title" placeholder="请输入标题" style="margin-bottom: 20px;width: 220px" readonly ></el-input>
|
|
|
</div>
|
|
|
|
|
|
- <el-input type="textarea" :rows=6 placeholder="请输入内容" resize="none" style="margin-bottom: 20px;width: 350px"></el-input>
|
|
|
+ <el-input v-model="description" type="textarea" :rows=6 placeholder="请输入内容" resize="none" style="margin-bottom: 20px;width: 350px" readonly></el-input>
|
|
|
|
|
|
<div style="width: 130px;height: 130px;background: rgba(15, 86, 86, 0.54);margin-bottom: 10px;border-radius: 8px;color: #00ffff;position: relative;font-size: 45px;display: flex;align-items: center;border: 1px solid #00ffff4d;">
|
|
|
<i v-if="!fileFlag" class="el-icon-plus" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"></i>
|
|
|
<input v-if="!fileFlag" type="file" ref="fileInput" @change="handleFileChange" style="display: none;position: absolute;left: -1000px"/>
|
|
|
<div v-if="!fileFlag" @click="triggerFileInput" style="width: 100%;height: 100%;cursor: pointer;position: absolute;"></div>
|
|
|
<div class="sth" v-if="fileFlag">
|
|
|
- <div style="width: 0;height: 0;border-left: 30px solid transparent;border-top: 30px solid #000000;position: absolute;top: 0;right: 0">
|
|
|
- </div>
|
|
|
- <div class="close-icon" @click="handleRemove"></div>
|
|
|
- <div style="width: 100%;height: 50%">
|
|
|
- <div style="width: 100%;height: 50%;display: flex;justify-content: center;align-items: start">
|
|
|
- <i class="el-icon-view" @click="handlePictureCardPreview"></i>
|
|
|
- </div>
|
|
|
- <div style="width: 100%;height: 50%;display: flex;justify-content: center;color: #00FFFF;font-size: 14px;align-items: end">预览</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div style="width: 0;height: 0;border-left: 30px solid transparent;border-top: 30px solid #000000;position: absolute;top: 0;right: 0">
|
|
|
+ </div>
|
|
|
+ <div class="close-icon" @click="handleRemove"></div>
|
|
|
+ <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center">
|
|
|
+ <div style="color: #00FFFF;font-size: 14px">{{ fileName }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<img width="100%" :src="dialogImageUrl" v-if="fileFlag" style="height: 100%;object-fit: cover;">
|
|
|
</div>
|
|
|
|
|
|
<div style="margin-bottom: 20px;color: #00ffff80;font-family: PingFangSC-Regular;font-weight: 400;font-size: 14px;">支持.docx、.xlsx格式</div>
|
|
|
|
|
|
- <el-button style="width: 100px;margin-top: 10px;margin-right: 10px;border: 1px solid #00FFFF;border-radius: 2px;">提交</el-button>
|
|
|
- <el-button style="width: 100px;margin-top: 10px;background: rgba(15, 86, 86, 0.54);color: #00ffff;border: 1px solid #00FFFF;border-radius: 2px;">取消</el-button>
|
|
|
+ <el-button @click="changeIssueStatus" style="width: 100px;margin-top: 10px;margin-right: 10px;border: 1px solid #00FFFF;border-radius: 2px;">提交</el-button>
|
|
|
+ <el-button @click="close" style="width: 100px;margin-top: 10px;background: rgba(15, 86, 86, 0.54);color: #00ffff;border: 1px solid #00FFFF;border-radius: 2px;">取消</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getFoodsList } from "@/api/screen/service";
|
|
|
+import { changeIssueStatus } from "@/api/screen/service";
|
|
|
import pinyin from "../data/pinyin.js";
|
|
|
|
|
|
export default {
|
|
|
+ props: {
|
|
|
+ getProList: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
fileFlag: false,
|
|
@@ -72,33 +77,86 @@ export default {
|
|
|
dialogImageUrl: '',
|
|
|
dialogVisible: false,
|
|
|
disabled: false,
|
|
|
- value:"2020-01-01",
|
|
|
+ value:'',
|
|
|
check:false,
|
|
|
- checked:false
|
|
|
+ checked:false,
|
|
|
+ // 新增fileName用于显示文件名
|
|
|
+ fileName: '',
|
|
|
+ // 保存原始File对象
|
|
|
+ selectedFile: null
|
|
|
};
|
|
|
},
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ this.cl()
|
|
|
+
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ cl(){
|
|
|
+ // alert(1)
|
|
|
+ this.title = this.getProList.title
|
|
|
+ this.description = this.getProList.description
|
|
|
+
|
|
|
+ this.value = this.getProList.createDate
|
|
|
+ },
|
|
|
triggerFileInput(){
|
|
|
this.$refs.fileInput.click();
|
|
|
},
|
|
|
-
|
|
|
- handleFileChange(event) {
|
|
|
- const file = event.target.files[0];
|
|
|
- if (file) {
|
|
|
- this.fileFlag = true
|
|
|
- const reader = new FileReader();
|
|
|
- reader.onload = (e) => {
|
|
|
- this.dialogImageUrl = e.target.result; // base64 编码的图片 URL
|
|
|
- };
|
|
|
- reader.readAsDataURL(file); // 读取文件并转换为 base64 格式
|
|
|
- console.log(this.dialogImageUrl)
|
|
|
+ changeIssueStatus() {
|
|
|
+ if (!this.selectedFile) {
|
|
|
+ this.$message.error('请选择要上传的文件');
|
|
|
+ return;
|
|
|
}
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('createDate', this.value);
|
|
|
+ formData.append('title', this.title);
|
|
|
+ formData.append('description', this.description);
|
|
|
+ formData.append('id', this.getProList.id);
|
|
|
+ formData.append('status', 1);
|
|
|
+ formData.append('file', this.selectedFile);
|
|
|
+
|
|
|
+ changeIssueStatus(formData).then((res) => {
|
|
|
+ if (Number(res.code) === 200) {
|
|
|
+ this.close();
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ console.error("修改状态失败:", err);
|
|
|
+ });
|
|
|
},
|
|
|
+ handleFileChange(event) {
|
|
|
+ const file = event.target.files[0];
|
|
|
+ if (!file) return;
|
|
|
+
|
|
|
+ // 添加文件类型校验
|
|
|
+ const allowedTypes = [
|
|
|
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
|
|
|
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // .xlsx
|
|
|
+ ];
|
|
|
+
|
|
|
+ if (!allowedTypes.includes(file.type)) {
|
|
|
+ this.$message.error('仅支持上传.docx和.xlsx格式文件');
|
|
|
+ this.handleRemove();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.fileFlag = true;
|
|
|
+ this.selectedFile = file; // 保存原始File对象
|
|
|
+ this.fileName = file.name; // 显示文件名
|
|
|
+},
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
handleRemove() {
|
|
|
- this.fileFlag = false
|
|
|
- this.dialogImageUrl = ''
|
|
|
+ this.fileFlag = false;
|
|
|
+ this.fileName = '';
|
|
|
+ this.selectedFile = null;
|
|
|
+ if (this.$refs.fileInput) {
|
|
|
+ this.$refs.fileInput.value = ''; // 清空文件输入
|
|
|
+ }
|
|
|
},
|
|
|
+
|
|
|
+ // 移除图片预览相关方法
|
|
|
+
|
|
|
handlePictureCardPreview() {
|
|
|
this.dialogVisible = true;
|
|
|
},
|