suzhou-jichuang-lanhai
/
TcAssetvue3
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交web资产详情

Browse Source
yanfeiyong
项洋 4 weeks ago
parent 55ef062a59
commit b8307bd917
3 changed files with 696 additions and 625 deletions
Show Stats Download Patch File Download Diff File

69
src/views/assetsManage2/webZC/index.vue
Unescape View File

@ -40,8 +40,8 @@
size="small"
class="demo-form-inline"
>
<el-row>
<el-col :span="7">
<el-row :gutter="30">
<el-col :span="8">
<el-form-item label="系统名称：" prop="xtmc">
<el-input
v-model="formInline.xtmc"
@ -49,7 +49,7 @@
></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-col :span="8">
<el-form-item label="系统类型：" prop="xtlx">
<el-select
v-model="formInline.xtlx"
@ -65,7 +65,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="7">
<el-col :span="8">
<el-form-item label="新增时间：" prop="time">
<el-date-picker
v-model="formInline.time"
@ -80,8 +80,8 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-row :gutter="30">
<el-col :span="8">
<el-form-item label="单位名称：" prop="dwmc">
<el-input
v-model="formInline.dwmc"
@ -89,7 +89,7 @@
></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-col :span="8">
<el-form-item label="系统状态：" prop="xtzt">
<el-select
v-model="formInline.xtzt"
@ -105,7 +105,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="9" style="text-align: right; padding-right: 35px">
<el-col :span="8" style="text-align: right; padding-right: 35px">
<el-form-item>
<el-button size="mini" @click="resetQuery">重置</el-button>
<el-button size="mini" type="primary" @click="handleQuery"
@ -536,22 +536,18 @@ const goInfo = (row, id) => {
type: 0,
id: row.id,
queryData: formInline,
parentName:"/assetsManage2/webZC"
},
meta: {
title: "新增资产",
icon: "user",
activeMenu: "/assetsManage/program",
parentName: "/assetsManage2/webZC",
},
});
} else if (id === 2) {
router.push({
name: "AssetsAuth",
path: "/assetsManage2/webZCinfo",
query: {
pageType: "change",
type: 0,
id: row.id,
queryData: formInline,
parentName: "/assetsManage2/webZC",
},
});
} else if (id === 3) {
@ -603,3 +599,46 @@ onUnmounted(() => {
window.removeEventListener("resize", cancalDebounce);
});
</script>
<style scoped>
::v-deep(.el-input__inner) {
line-height: 32px;
height: 30px;
}
::v-deep(.el-select__selection) {
line-height: 32px;
height: 30px;
}
::v-deep(.el-form-item__content) {
line-height: 32px;
height: 30px;
}
::v-deep(.el-range-editor--small.el-input__wrapper) {
line-height: 32px !important;
height: 30px !important;
}
/* .el-select__wrapper .el-input__wrapper {
line-height: 32px;
height: 30px;
} */
/* ::v-deep(.el-input__inner) {
line-height: 32px;
}
::v-deep(.el-select) {
line-height: 32px;
height: 30px;
}
::v-deep(.el-select--small .el-select__wrapper .el-input__wrapper) {
line-height: 32px;
height: 30px;
}
::v-deep(.el-range-editor--small) {
line-height: 32px;
height: 30px;
}
::v-deep(.el-form-item__content) {
justify-content: flex-end;
line-height: 32px;
height: 30px;
} */
</style>

913
src/views/assetsManage2/webZCinfo/index.vue
View File

File diff suppressed because it is too large Load Diff

339
src/views/components/myUpload/index.vue
Unescape View File

@ -2,11 +2,11 @@
<div class="upload-file">
<el-upload
multiple
v-show="fileList.length == 0"
v-show="fileList.length === 0"
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="limit"
:limit="props.limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
@ -16,7 +16,7 @@
ref="fileUpload"
>
<!-- 上传按钮 -->
<slot v-if="fileList.length == 0"></slot>
<slot v-if="fileList.length === 0"></slot>
</el-upload>
<!-- 文件列表 -->
@ -39,7 +39,7 @@
</el-link>
<div
class="ele-upload-list__item-content-action"
v-if="$route.query.pageType != 'look'"
v-if="route.query.pageType !== 'look'"
>
<el-link :underline="false" @click="handleDelete(index)" type="danger"
>删除</el-link
@ -50,180 +50,176 @@
</div>
</template>
<script>
<script setup>
import { ref, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";
import { ElMessage, ElLoading } from "element-plus";
import { getToken } from "@/utils/auth";
import Sortable from "sortablejs";
export default {
name: "FileUpload",
props: {
// 值
value: [String, Object, Array],
// 数量限制
limit: {
type: Number,
default: 5,
},
// 大小限制(MB)
fileSize: {
type: Number,
default: 5,
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ["doc", "xls", "ppt", "txt", "pdf"],
},
// 是否显示提示
isShowTip: {
type: Boolean,
default: true,
},
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const fileUpload = ref(null);
// Props定义
const props = defineProps({
modelValue: {
type: [String, Object, Array],
default: "",
},
data() {
return {
number: 0,
uploadList: [],
baseUrl:process.env.VUE_APP_HJ == "test" ? process.env.VUE_APP_BASE_API :location.origin + '/api',
uploadFileUrl: process.env.VUE_APP_HJ == "test" ? process.env.VUE_APP_BASE_API + "/common/upload" : location.origin + '/api/common/upload',
headers: {
Authorization: "Bearer " + getToken(),
},
fileList: [],
};
limit: {
type: Number,
default: 5,
},
watch: {
value: {
handler(val) {
if (val) {
let temp = 1;
// 首先将值转为数组
const list = Array.isArray(val) ? val : this.value.split(",");
// 然后将数组转为对象数组
this.fileList = list.map((item) => {
if (typeof item === "string") {
item = { name: item, url: item };
}
item.uid = item.uid || new Date().getTime() + temp++;
return item;
});
} else {
this.fileList = [];
return [];
}
},
deep: true,
immediate: true,
},
fileSize: {
type: Number,
default: 5,
},
computed: {
// 是否显示提示
showTip() {
return this.isShowTip && (this.fileType || this.fileSize);
},
fileType: {
type: Array,
default: () => ["doc", "xls", "ppt", "txt", "pdf"],
},
mounted(){
// console.log( process.env.VUE_APP_HJ,'ddfee',process.env.VUE_APP_BASE_API + "/common/upload")
isShowTip: {
type: Boolean,
default: true,
},
methods: {
// 上传前校检格式和大小
handleBeforeUpload(file) {
// 校检文件类型
if (this.fileType) {
const fileName = file.name.split(".");
const fileExt = fileName[fileName.length - 1];
const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
if (!isTypeOk) {
this.$modal.msgError(
`文件格式不正确，请上传${this.fileType.join("/")}格式文件!`
);
return false;
}
}
// 校检文件名是否包含特殊字符
if (file.name.includes(",")) {
this.$modal.msgError("文件名不正确，不能包含英文逗号!");
return false;
}
// 校检文件大小
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
return false;
});
// Emits定义
const emit = defineEmits(["update:modelValue"]);
// 响应式数据
const number = ref(0);
const uploadList = ref([]);
const fileList = ref([]);
// const baseUrl = import.meta.env.VITE_APP_BASE_API
// const uploadFileUrl =
const baseUrl = import.meta.env.VITE_APP_HJ === "test" ? import.meta.env.VITE_APP_BASE_API : location.origin + '/api'
const uploadFileUrl = import.meta.env.VITE_APP_HJ === "test" ? import.meta.env.VITE_APP_BASE_API + "/common/upload" : 'http://192.168.0.112:9115/api/common/upload'
const headers = ref({
Authorization: "Bearer " + getToken(),
});
// 计算属性
const showTip = computed(() => {
return props.isShowTip && (props.fileType || props.fileSize);
});
// 监听器
watch(
() => props.modelValue,
(val) => {
if (val) {
let temp = 1;
// 首先将值转为数组
const list = Array.isArray(val) ? val : val.split(",");
// 然后将数组转为对象数组
fileList.value = list.map((item) => {
if (typeof item === "string") {
item = { name: item, url: item };
}
}
this.$modal.loading("正在上传文件，请稍候...");
this.number++;
return true;
},
// 文件个数超出
handleExceed() {
this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
},
// 上传失败
handleUploadError(err) {
this.$modal.msgError("上传文件失败，请重试");
this.$modal.closeLoading();
},
// 上传成功回调
handleUploadSuccess(res, file) {
if (res.code === 200) {
this.uploadList.push({ name: res.fileName, url: res.fileName });
this.uploadedSuccessfully();
} else if (res.code == 401) {
this.$store.dispatch("LogOut").then(() => {
// location.href = '/login';
this.$modal.msgError(res.msg);
this.$modal.closeLoading();
this.uploadedSuccessfully();
this.$router.replace("/login");
});
} else {
this.number--;
this.$modal.closeLoading();
this.$modal.msgError(res.msg);
this.$refs.fileUpload.handleRemove(file);
this.uploadedSuccessfully();
}
},
// 删除文件
handleDelete(index) {
this.fileList.splice(index, 1);
this.$emit("input", this.listToString(this.fileList));
},
// 上传结束处理
uploadedSuccessfully() {
if (this.number > 0 && this.uploadList.length === this.number) {
this.fileList = this.fileList.concat(this.uploadList);
this.uploadList = [];
this.number = 0;
this.$emit("input", this.listToString(this.fileList));
this.$modal.closeLoading();
}
},
// 获取文件名称
getFileName(name) {
// 如果是url那么取最后的名字 如果不是直接返回
if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1);
} else {
return name;
}
},
// 对象转成指定字符串分隔
listToString(list, separator) {
let strs = "";
separator = separator || ",";
for (let i in list) {
strs += list[i].url + separator;
}
return strs != "" ? strs.substr(0, strs.length - 1) : "";
},
item.uid = item.uid || new Date().getTime() + temp++;
return item;
});
} else {
fileList.value = [];
}
},
{ deep: true, immediate: true }
);
// 方法定义
const handleBeforeUpload = (file) => {
// 校检文件类型
if (props.fileType) {
const fileName = file.name.split(".");
const fileExt = fileName[fileName.length - 1];
const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
if (!isTypeOk) {
ElMessage.error(
`文件格式不正确，请上传${props.fileType.join("/")}格式文件!`
);
return false;
}
}
// 校检文件名是否包含特殊字符
if (file.name.includes(",")) {
ElMessage.error("文件名不正确，不能包含英文逗号!");
return false;
}
// 校检文件大小
if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize;
if (!isLt) {
ElMessage.error(`上传文件大小不能超过 ${props.fileSize} MB!`);
return false;
}
}
const loading = ElLoading.service({
text: "正在上传文件，请稍候...",
});
number.value++;
return true;
};
const handleExceed = () => {
ElMessage.error(`上传文件数量不能超过 ${props.limit} 个!`);
};
const handleUploadError = (err) => {
ElMessage.error("上传文件失败，请重试");
ElLoading.service().close();
};
const handleUploadSuccess = (res, file) => {
if (res.code === 200) {
uploadList.value.push({ name: res.fileName, url: res.fileName });
uploadedSuccessfully();
} else if (res.code === 401) {
userStore.logOut().then(() => {
ElMessage.error(res.msg);
ElLoading.service().close();
uploadedSuccessfully();
router.replace("/login");
});
} else {
number.value--;
ElLoading.service().close();
ElMessage.error(res.msg);
fileUpload.value.handleRemove(file);
uploadedSuccessfully();
}
};
const handleDelete = (index) => {
fileList.value.splice(index, 1);
emit("update:modelValue", listToString(fileList.value));
};
const uploadedSuccessfully = () => {
if (number.value > 0 && uploadList.value.length === number.value) {
fileList.value = fileList.value.concat(uploadList.value);
uploadList.value = [];
number.value = 0;
emit("update:modelValue", listToString(fileList.value));
ElLoading.service().close();
}
};
const getFileName = (name) => {
if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1);
}
return name;
};
const listToString = (list, separator = ",") => {
let strs = "";
for (let i in list) {
strs += list[i].url + separator;
}
return strs !== "" ? strs.substr(0, strs.length - 1) : "";
};
</script>
@ -231,18 +227,21 @@ export default {
.upload-file-uploader {
margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
border: 1px solid #e4e7ed;
line-height: 2;
margin-bottom: 10px;
position: relative;
}
.upload-file-list .ele-upload-list__item-content {
display: flex;
justify-content: space-between;
align-items: center;
color: inherit;
}
.ele-upload-list__item-content-action .el-link {
margin-right: 10px;
}

Write Preview
Loading…
Cancel
Save