From cf65a7d789f8887a407ca1060da9f0810b40ac3b Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期四, 23 十一月 2023 11:06:58 +0800
Subject: [PATCH] 项目表
---
web/src/components/table-uploader/index.js | 7 +
web/src/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate.vue | 52 ++++++++----
web/src/main.js | 2
web/src/components/table-uploader/src/table-uploader.vue | 118 +++++++++++++++++++++++++++++
web/src/views/modules/project/Environ-AddOrUpdate.vue | 28 ------
web/src/assets/css/custom.css | 27 ++++++
6 files changed, 190 insertions(+), 44 deletions(-)
diff --git a/web/src/assets/css/custom.css b/web/src/assets/css/custom.css
index 6c180e6..ec16e5c 100644
--- a/web/src/assets/css/custom.css
+++ b/web/src/assets/css/custom.css
@@ -327,3 +327,30 @@
.el-border-bottom {
border-bottom: 1px solid rgba(0, 0, 0, .2);
}
+.table-container {
+ position: relative;
+}
+.table-container:hover .icon-container {
+ opacity: 1; /* 榧犳爣鎮仠鏃舵樉绀哄浘鏍� */
+}
+.icon-container {
+ z-index: 1;
+ position: absolute;
+ bottom: -20px;
+ left: 50%;
+ width: 40px;
+ height: 30px;
+ text-align: center;
+ line-height: 30px;
+ transform: translate3d(-50%, 0, -20px);
+ border: 1px solid #EBEEF5;
+ background-color: #fafafa;
+ box-shadow: 0 3px 6px 0 rgba(72, 119, 232, 0.14);
+ border-radius: 2px;
+ transition: transform 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;
+ opacity: 0;
+}
+.icon-container:hover{
+ transform: translate3d(-50%, 0, 0);
+ box-shadow: 0 10px 10px 0 rgba(72, 119, 232, 0.34)
+}
diff --git a/web/src/components/table-uploader/index.js b/web/src/components/table-uploader/index.js
new file mode 100644
index 0000000..18f80bb
--- /dev/null
+++ b/web/src/components/table-uploader/index.js
@@ -0,0 +1,7 @@
+import comp from './src/table-uploader'
+
+comp.install = function (Vue) {
+ Vue.component(comp.name, comp)
+}
+
+export default comp
diff --git a/web/src/components/table-uploader/src/table-uploader.vue b/web/src/components/table-uploader/src/table-uploader.vue
new file mode 100644
index 0000000..dfde297
--- /dev/null
+++ b/web/src/components/table-uploader/src/table-uploader.vue
@@ -0,0 +1,118 @@
+<template>
+ <div>
+ <div class="config-uploader" >
+ <div v-for="group in (oss.groups || [])" :key="group.busiFieldGroup">
+ <zt-form-item v-for="field in group.fields" :prop="field.busiField"
+ :key="field.busiField" :rules="field.isRequired ? 'required':''" style="width: 100%;margin-bottom: 0">
+ <zt-uploader v-model="dataForm[field.busiField]" multiple :limit="field.fileLimit" :file-type="field.fileType"
+ :accept="field.accept" :file-size="field.fileSize" @input="change(field.busiField)"/>
+ </zt-form-item>
+<!-- <el-table :data="group.fields" :show-header="false">-->
+<!-- <el-table-column width="250" style="text-align: left;white-space:nowrap;">-->
+<!-- <template slot-scope="scope">-->
+<!-- <span v-html="scope.row.busiFieldName"></span>-->
+<!-- </template>-->
+<!-- </el-table-column>-->
+<!-- <el-table-column align="left">-->
+<!-- <template slot-scope="scope">-->
+<!-- <zt-uploader v-model="dataForm[scope.row.busiField]" multiple :limit="scope.row.fileLimit" :file-type="scope.row.fileType"-->
+<!-- :accept="scope.row.accept" :file-size="scope.row.fileSize" @getUploaderImg="getUploaderImg" @input="change(scope.row.busiField)"/>-->
+<!-- </template>-->
+<!-- </el-table-column>-->
+<!-- </el-table>-->
+ </div>
+ </div>
+ </div>
+
+</template>
+<script>
+
+export default {
+ name: 'TableUploader',
+ components: {},
+ props: {
+ value: Object,
+ dataForm: Object,
+ image:false,
+ busiType: String // 涓氬姟绫诲瀷
+ },
+ data() {
+ return {
+ activeNames: ['1'],
+ oss: null
+ }
+ },
+ computed: {
+ fields() {
+ let arr = []
+ if (this.dataForm.files && this.dataForm.files.groups) {
+ this.dataForm.files.groups.forEach(group => {
+ group.fields.forEach(field => arr.push(field))
+ })
+ }
+ return arr
+ }
+ },
+ watch: {
+ value(val, oldval) {
+ if (JSON.stringify(val) !== JSON.stringify(oldval)) {
+ this.oss = {
+ ...this.getOss(),
+ ...(val || {})
+ }
+ // this.dataForm.files = this.oss
+ this.$set(this.dataForm, 'files', this.oss)
+
+ // 鍒嗚В鍒版瘡涓瓧娈电粰dataForm璧嬪��
+ this.fields.forEach(field => {
+ // this.dataForm[field.busiField] = field.files
+ this.$set(this.dataForm, field.busiField, field.files)
+ })
+ }
+ }
+ },
+ mounted() {
+ this.oss = this.getOss()
+ if (this.oss) {
+ this.oss.groups.forEach(group => {
+ this.activeNames.push(group.busiFieldGroup)
+ })
+ // this.dataForm.files = this.oss
+ this.$set(this.dataForm, 'files', this.oss)
+ }
+ },
+ methods: {
+ getOss() {
+ let arr = (this.$store.state.oss.configs || []).filter(config => config.busiType === this.busiType)
+ if (arr.length > 0) {
+ return JSON.parse(JSON.stringify(arr[0]))
+ }
+ return null
+ },
+ change(busiField) {
+ console.log(busiField,'busiField busiField')
+ this.fields.forEach(field => {
+ if (field.busiField === busiField) {
+ field.files.length = 0
+ this.dataForm[busiField].forEach(file => field.files.push(file))
+ }
+ })
+ },
+ getUploaderImg(list){
+ // this.imageList = list
+ if(list[0].url){
+ this.$emit('getImageUrl',list[0].url)
+ }
+
+ }
+ }
+}
+</script>
+<style>
+.config-uploader label {
+ width: 260px !important;
+}
+.zt .el-upload-list__item .el-progress{
+ top:15px !important;
+}
+</style>
diff --git a/web/src/main.js b/web/src/main.js
index 5ac5f6f..dd63816 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -41,6 +41,7 @@
import ColumnSelect from './components/column-select'
import ZtEquipmentConfig from './components/zt-equipment-config'
import ZtEquipmentSelect from './components/zt-equipment-select'
+import TableUploader from './components/table-uploader'
import scroll from 'vue-seamless-scroll'
import adaptive from './directive/el-table'
import './directive/dialogDrag'
@@ -79,6 +80,7 @@
Vue.use(ColumnSelect)
Vue.use(ZtEquipmentConfig)
Vue.use(ZtEquipmentSelect)
+Vue.use(TableUploader)
Vue.config.productionTip = false
Vue.directive('loadmore', {
diff --git a/web/src/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate.vue b/web/src/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate.vue
index b83ab23..f70a834 100644
--- a/web/src/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate.vue
+++ b/web/src/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate.vue
@@ -31,53 +31,61 @@
<div style="padding-left:5px;padding-right:5px;">
<div style="padding: 5px">鐗╁搧鎶�鏈祫鏂欏強鏁伴噺锛�</div>
<div class="table-container">
- <el-table ref="tableSoftwareList" class="el-software el-margin-top-bot" border :data="dataForm.technicalList"
+ <el-table ref="tableCirculatOrderList" class="el-software el-margin-top-bot" border :data="dataForm.technicalList"
stripe>
- <el-table-column prop="no" align="center" width="80" label="搴忓彿">
+ <el-table-column prop="no" align="center" width="60" label="搴忓彿">
<template slot-scope="scope">
<span v-html="indexFormat(scope.$index)"></span>
</template>
</el-table-column>
- <el-table-column prop="infoName" min-width="300" label="鎶�鏈祫鏂欏悕绉�">
+ <el-table-column prop="Name" min-width="180" label="鎶�鏈祫鏂欏悕绉�">
<template v-slot="{ row }">
- <el-input v-model="row.name" placeholder="鎶�鏈祫鏂欏悕绉�"></el-input>
+ <el-input v-model="row.Name" placeholder="鎶�鏈祫鏂欏悕绉�"></el-input>
</template>
</el-table-column>
- <el-table-column prop="identify" align="center" width="180" label="鏍囪瘑">
+ <el-table-column prop="identify" align="center" width="150" label="鏍囪瘑">
<template v-slot="{ row }">
- <el-input v-model="row.version" placeholder="鏍囪瘑"></el-input>
+ <el-input v-model="row.identify" placeholder="鏍囪瘑"></el-input>
</template>
</el-table-column>
- <el-table-column prop="version" align="center" width="180" label="鐗堟湰">
+ <el-table-column prop="version" align="center" width="120" label="鐗堟湰">
<template v-slot="{ row }">
- <el-input v-model="row.identify" placeholder="鐗堟湰"></el-input>
+ <el-input v-model="row.version" placeholder="鐗堟湰"></el-input>
</template>
</el-table-column>
- <el-table-column prop="secretClass" label="瀵嗙骇" width="180" align="center">
+ <el-table-column prop="secretClass" label="瀵嗙骇" width="100" align="center">
<template v-slot="{ row }">
- <el-input v-model="row.secretClass" placeholder="瀵嗙骇"></el-input>
+<!-- <el-input v-model="row.secretClass" placeholder="瀵嗙骇"></el-input>-->
+ <zt-dict v-model="row.secretClass" dict="secret_class"></zt-dict>
</template>
</el-table-column>
- <el-table-column prop="medium" label="浠嬭川" width="180" align="center">
+ <el-table-column prop="medium" label="浠嬭川" width="100" align="center">
<template v-slot="{ row }">
<el-input v-model="row.medium" placeholder="浠嬭川"></el-input>
</template>
</el-table-column>
- <el-table-column prop="amount" label="鏁伴噺" width="180" align="center">
+ <el-table-column prop="amount" label="鏁伴噺" width="80" align="center">
<template v-slot="{ row }">
<el-input v-model="row.amount" placeholder="鏁伴噺"></el-input>
</template>
</el-table-column>
- <el-table-column prop="remark" label="澶囨敞" width="180" align="center">
+ <el-table-column prop="remark" label="澶囨敞" width="100" align="center">
<template v-slot="{ row }">
<el-input v-model="row.remark" placeholder="澶囨敞"></el-input>
</template>
</el-table-column>
+ <el-table-column fixed="right" prop="files" label="涓婁紶闄勪欢" width="80" align="center">
+ <template v-slot="{ row }">
+<!-- <zt-table-button @click="files(row.id)">涓婁紶闄勪欢</zt-table-button>-->
+ <table-uploader busi-type="test_order" model-name="dataForm" :dataForm="dataForm"
+ v-model="row.files"/>
+ </template>
+ </el-table-column>
</el-table>
-<!-- <div class="icon-container" @click="addSoftwareRow()">-->
-<!-- <!– 鏀剧疆鍥哄畾鐨勫浘鏍� –>-->
-<!-- <i class="el-icon-plus"></i>-->
-<!-- </div>-->
+ <div class="icon-container" @click="addCirculatRow()">
+ <!-- 鏀剧疆鍥哄畾鐨勫浘鏍� -->
+ <i class="el-icon-plus"></i>
+ </div>
</div>
</div>
</div>
@@ -179,6 +187,9 @@
}
},
methods: {
+ indexFormat(index){
+ return index += 1
+ },
init(id,row){
this.dataForm.id = row.id
this.dataForm.projectId = row.projectId
@@ -186,6 +197,13 @@
this.getInfo()
console.log(this.dataForm.id,this.dataForm.projectId,'params params')
},
+ addCirculatRow(){
+ this.dataForm.technicalList.push({})
+ this.$nextTick(()=>{
+ const tableBody=this.$refs.tableCirculatOrderList.$el.querySelector('.el-table__body-wrapper')
+ tableBody.scrollTop = tableBody.scrollHeight;
+ })
+ },
// 鑾峰彇淇℃伅
async getInfo() {
let params = {
diff --git a/web/src/views/modules/project/Environ-AddOrUpdate.vue b/web/src/views/modules/project/Environ-AddOrUpdate.vue
index 5ce1f80..343c843 100644
--- a/web/src/views/modules/project/Environ-AddOrUpdate.vue
+++ b/web/src/views/modules/project/Environ-AddOrUpdate.vue
@@ -374,31 +374,5 @@
margin-top: 0 !important;
margin-bottom: 10px !important;
}
-.table-container {
- position: relative;
-}
-.table-container:hover .icon-container {
- opacity: 1; /* 榧犳爣鎮仠鏃舵樉绀哄浘鏍� */
-}
-.icon-container {
- z-index: 1;
- position: absolute;
- bottom: -20px;
- left: 50%;
- width: 40px;
- height: 30px;
- text-align: center;
- line-height: 30px;
- transform: translate3d(-50%, 0, -20px);
- border: 1px solid #EBEEF5;
- background-color: #fafafa;
- box-shadow: 0 3px 6px 0 rgba(72, 119, 232, 0.14);
- border-radius: 2px;
- transition: transform 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;
- opacity: 0;
-}
-.icon-container:hover{
- transform: translate3d(-50%, 0, 0);
- box-shadow: 0 10px 10px 0 rgba(72, 119, 232, 0.34)
-}
+
</style>
--
Gitblit v1.9.1