| web/src/assets/css/custom.css | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| web/src/components/table-uploader/index.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| web/src/components/table-uploader/src/table-uploader.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| web/src/main.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| web/src/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| web/src/views/modules/project/Environ-AddOrUpdate.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
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) } web/src/components/table-uploader/index.js
New file @@ -0,0 +1,7 @@ import comp from './src/table-uploader' comp.install = function (Vue) { Vue.component(comp.name, comp) } export default comp web/src/components/table-uploader/src/table-uploader.vue
New file @@ -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> 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', { 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 = { 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>
