|
@@ -2,263 +2,283 @@
|
|
<div class="data-info">
|
|
<div class="data-info">
|
|
<el-card>
|
|
<el-card>
|
|
<el-form :model="dataForm" label-width="120px">
|
|
<el-form :model="dataForm" label-width="120px">
|
|
-
|
|
|
|
<el-form-item label="数据表编码:">
|
|
<el-form-item label="数据表编码:">
|
|
<el-input v-model="dataForm.code"></el-input>
|
|
<el-input v-model="dataForm.code"></el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="所属分类:">
|
|
<el-form-item label="所属分类:">
|
|
- <el-select v-model="dataForm.category_id" clearable placeholder="请选择所属分类" size="large"style="width:100%;">
|
|
|
|
- <el-option
|
|
|
|
- v-for="item in categoryList"
|
|
|
|
- :key="item.id"
|
|
|
|
- :label="item.name"
|
|
|
|
- :value="item.id"
|
|
|
|
- />
|
|
|
|
- </el-select>
|
|
|
|
|
|
+ <el-select
|
|
|
|
+ v-model="dataForm.category_id"
|
|
|
|
+ clearable
|
|
|
|
+ placeholder="请选择所属分类"
|
|
|
|
+ size="large"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ >
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in categoryList"
|
|
|
|
+ :key="item.id"
|
|
|
|
+ :label="item.name"
|
|
|
|
+ :value="item.id"
|
|
|
|
+ />
|
|
|
|
+ </el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="数据表名称:">
|
|
<el-form-item label="数据表名称:">
|
|
<el-input v-model="dataForm.name"></el-input>
|
|
<el-input v-model="dataForm.name"></el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="选择文件:">
|
|
<el-form-item label="选择文件:">
|
|
- <el-upload
|
|
|
|
- v-model:file-list="fileList"
|
|
|
|
- :limit="1"
|
|
|
|
- action=""
|
|
|
|
- :multiple="false"
|
|
|
|
- :show-file-list ="false"
|
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
|
- >
|
|
|
|
- <el-button type="primary">请选择Excel文件</el-button>
|
|
|
|
- <template #tip>
|
|
|
|
- <div class="el-upload__tip">
|
|
|
|
-
|
|
|
|
- </div>
|
|
|
|
- </template>
|
|
|
|
- </el-upload>
|
|
|
|
-
|
|
|
|
|
|
+ <el-upload
|
|
|
|
+ v-model:file-list="fileList"
|
|
|
|
+ :limit="1"
|
|
|
|
+ action=""
|
|
|
|
+ :multiple="false"
|
|
|
|
+ :show-file-list="false"
|
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
|
+ >
|
|
|
|
+ <el-button type="primary">请选择Excel文件</el-button>
|
|
|
|
+ <template #tip>
|
|
|
|
+ <div class="el-upload__tip"></div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-upload>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
|
- <el-form-item label="表格内容预览:" style="min-height:500px;" v-if="fileLoadStatus">
|
|
|
|
- <div id="luckysheet" ref="luckysheet" style="width:100%;height:500px;"> </div>
|
|
|
|
-
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="表格内容预览:"
|
|
|
|
+ style="min-height: 500px"
|
|
|
|
+ v-if="fileLoadStatus"
|
|
|
|
+ >
|
|
|
|
+ <div
|
|
|
|
+ id="luckysheet"
|
|
|
|
+ ref="luckysheet"
|
|
|
|
+ style="width: 100%; height: 500px"
|
|
|
|
+ ></div>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="状态:">
|
|
<el-form-item label="状态:">
|
|
- <el-select v-model="dataForm.status" placeholder="请选择状态" size="large"style="width:100%;">
|
|
|
|
- <el-option
|
|
|
|
- v-for="item in statusOptions"
|
|
|
|
- :key="item.value"
|
|
|
|
- :label="item.label"
|
|
|
|
- :value="item.value"
|
|
|
|
- />
|
|
|
|
- </el-select>
|
|
|
|
|
|
+ <el-select
|
|
|
|
+ v-model="dataForm.status"
|
|
|
|
+ placeholder="请选择状态"
|
|
|
|
+ size="large"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ >
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in statusOptions"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ />
|
|
|
|
+ </el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
-
|
|
|
|
</el-card>
|
|
</el-card>
|
|
|
|
|
|
-
|
|
|
|
- <div style="text-align:right; margin-top:20px;">
|
|
|
|
- <el-button type="warning" @click="btnSave">确认保存</el-button>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div style="text-align: right; margin-top: 20px">
|
|
|
|
+ <el-button type="warning" @click="btnSave">确认保存</el-button>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import LuckyExcel from 'luckyexcel'; //引入LuckyExcel
|
|
|
|
- import {searchSourceDataCategory,createSourceData,updateSourceData,getSourceData} from'@/api/sourceData'
|
|
|
|
- export default{
|
|
|
|
-
|
|
|
|
- emits:['onClose'],
|
|
|
|
- props:{
|
|
|
|
- dataId:{
|
|
|
|
- type:Number,
|
|
|
|
- default:0,
|
|
|
|
- }
|
|
|
|
|
|
+import LuckyExcel from "luckyexcel"; //引入LuckyExcel
|
|
|
|
+import {
|
|
|
|
+ searchSourceDataCategory,
|
|
|
|
+ createSourceData,
|
|
|
|
+ updateSourceData,
|
|
|
|
+ getSourceData,
|
|
|
|
+} from "@/api/sourceData";
|
|
|
|
+export default {
|
|
|
|
+ emits: ["onClose"],
|
|
|
|
+ props: {
|
|
|
|
+ dataId: {
|
|
|
|
+ type: Number,
|
|
|
|
+ default: 0,
|
|
},
|
|
},
|
|
- watch:{
|
|
|
|
- 'dataId':{
|
|
|
|
- handler(val){
|
|
|
|
- if(val==null)return;
|
|
|
|
- if(val==0)return;
|
|
|
|
- this.loadData(val);
|
|
|
|
- },
|
|
|
|
- immediate: true,//立即执行
|
|
|
|
- deep: true
|
|
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ dataId: {
|
|
|
|
+ handler(val) {
|
|
|
|
+ if (val == null) return;
|
|
|
|
+ if (val == 0) return;
|
|
|
|
+ this.loadData(val);
|
|
|
|
+ },
|
|
|
|
+ immediate: true, //立即执行
|
|
|
|
+ deep: true,
|
|
},
|
|
},
|
|
- data(){
|
|
|
|
- return{
|
|
|
|
- isMaskShow: false,
|
|
|
|
- dataForm:{
|
|
|
|
- id:0,
|
|
|
|
- code:'',
|
|
|
|
- name:'',
|
|
|
|
- sourceData:{
|
|
|
|
- exportJson:null,
|
|
|
|
- luckysheetfile:''
|
|
|
|
- },
|
|
|
|
- status:5,
|
|
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ isMaskShow: false,
|
|
|
|
+ dataForm: {
|
|
|
|
+ id: 0,
|
|
|
|
+ code: "",
|
|
|
|
+ name: "",
|
|
|
|
+ sourceData: {
|
|
|
|
+ exportJson: null,
|
|
|
|
+ luckysheetfile: "",
|
|
},
|
|
},
|
|
- categoryList:[],
|
|
|
|
- fileLoadStatus:false,
|
|
|
|
- file:'',
|
|
|
|
- fileList:[],
|
|
|
|
- statusOptions:[
|
|
|
|
- {
|
|
|
|
- value:'',
|
|
|
|
- label:"请选择状态"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- value:5,
|
|
|
|
- label:'启用'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- value:6,
|
|
|
|
- label:"停用"
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- mounted(){
|
|
|
|
- this.initCategory();
|
|
|
|
- },
|
|
|
|
- methods:{
|
|
|
|
-
|
|
|
|
- initCategory(){
|
|
|
|
- let _this=this;
|
|
|
|
- searchSourceDataCategory({page:1,pageSize:9999,status:5}).then(res=>{
|
|
|
|
- if(res.status!=200)return;
|
|
|
|
- _this.categoryList=res.data.sourcecategories.map(res=>{
|
|
|
|
- return{
|
|
|
|
- id:res.id,
|
|
|
|
- value:res.id,
|
|
|
|
- name:res.name,
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- })
|
|
|
|
|
|
+ status: 5,
|
|
},
|
|
},
|
|
-
|
|
|
|
-
|
|
|
|
- loadData(id){
|
|
|
|
- let _this=this;
|
|
|
|
- let par={
|
|
|
|
- id:id,
|
|
|
|
|
|
+ categoryList: [],
|
|
|
|
+ fileLoadStatus: false,
|
|
|
|
+ file: "",
|
|
|
|
+ fileList: [],
|
|
|
|
+ statusOptions: [
|
|
|
|
+ {
|
|
|
|
+ value: "",
|
|
|
|
+ label: "请选择状态",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: 5,
|
|
|
|
+ label: "启用",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: 6,
|
|
|
|
+ label: "停用",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.initCategory();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ initCategory() {
|
|
|
|
+ let _this = this;
|
|
|
|
+ searchSourceDataCategory({ page: 1, pageSize: 9999, status: 5 }).then(
|
|
|
|
+ (res) => {
|
|
|
|
+ if (res.status != 200) return;
|
|
|
|
+ _this.categoryList = res.data.sourcecategories.map((res) => {
|
|
|
|
+ return {
|
|
|
|
+ id: res.id,
|
|
|
|
+ value: res.id,
|
|
|
|
+ name: res.name,
|
|
|
|
+ };
|
|
|
|
+ });
|
|
}
|
|
}
|
|
- getSourceData(par).then(res=>{
|
|
|
|
- if(res.status!=200){
|
|
|
|
- this.dataForm.id=0;
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- _this.dataForm=res.data;
|
|
|
|
- _this.dataForm.sourceData=JSON.parse(_this.dataForm.source_data);
|
|
|
|
- _this.dataForm.category_id=res.data.category.id;
|
|
|
|
|
|
+ );
|
|
|
|
+ },
|
|
|
|
|
|
- _this.fileLoadStatus=true;
|
|
|
|
- _this.$nextTick(() => {
|
|
|
|
- luckysheet.destroy();
|
|
|
|
- luckysheet.create({
|
|
|
|
- container: 'luckysheet', //dom id
|
|
|
|
- data: _this.dataForm.sourceData.exportJson.sheets, //excel数据
|
|
|
|
- lang: 'zh',
|
|
|
|
- hook:{
|
|
|
|
- cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
|
|
|
|
|
|
+ loadData(id) {
|
|
|
|
+ let _this = this;
|
|
|
|
+ let par = {
|
|
|
|
+ id: id,
|
|
|
|
+ };
|
|
|
|
+ getSourceData(par).then((res) => {
|
|
|
|
+ if (res.status != 200) {
|
|
|
|
+ this.dataForm.id = 0;
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ _this.dataForm = res.data;
|
|
|
|
+ _this.dataForm.sourceData = JSON.parse(_this.dataForm.source_data);
|
|
|
|
+ if (res.data.category && res.data.category.id) {
|
|
|
|
+ _this.dataForm.category_id = res.data.category.id;
|
|
|
|
+ }
|
|
|
|
|
|
- // console.log("oldVal",oldValue);
|
|
|
|
- // console.log("newVal",newValue);
|
|
|
|
- // console.log('exportJson',_this.dataForm.source_data.exportJson)
|
|
|
|
- },
|
|
|
|
|
|
+ _this.fileLoadStatus = true;
|
|
|
|
+ _this.$nextTick(() => {
|
|
|
|
+ luckysheet.destroy();
|
|
|
|
+ luckysheet.create({
|
|
|
|
+ container: "luckysheet", //dom id
|
|
|
|
+ data: _this.dataForm.sourceData.exportJson.sheets, //excel数据
|
|
|
|
+ lang: "zh",
|
|
|
|
+ hook: {
|
|
|
|
+ cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
|
|
|
|
+ // console.log("oldVal",oldValue);
|
|
|
|
+ // console.log("newVal",newValue);
|
|
|
|
+ // console.log('exportJson',_this.dataForm.source_data.exportJson)
|
|
},
|
|
},
|
|
- });
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ },
|
|
});
|
|
});
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
|
|
|
|
+ btnSave(e) {
|
|
|
|
+ let _this = this;
|
|
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- btnSave(e){
|
|
|
|
- let _this=this;
|
|
|
|
-
|
|
|
|
- if(_this.dataForm.code==""){
|
|
|
|
- _this.$alert("请填写数据表编码");
|
|
|
|
- return false;
|
|
|
|
- }
|
|
|
|
- if(_this.dataForm.name==""){
|
|
|
|
- _this.$alert("请填写数据表名称");
|
|
|
|
- return false;
|
|
|
|
- }
|
|
|
|
- if(_this.dataForm.sourceData.exportJson==null){
|
|
|
|
- _this.$alert("请选择上传excel文件");
|
|
|
|
- return false;
|
|
|
|
- }
|
|
|
|
- let data=JSON.parse(JSON.stringify(_this.dataForm));
|
|
|
|
- data.source_data=JSON.stringify(data.sourceData);
|
|
|
|
- delete data.sourceData;
|
|
|
|
- if(data.id>0){
|
|
|
|
- updateSourceData(data).then(res=>{
|
|
|
|
- if(res.status!=200){
|
|
|
|
- _this.$message(res.message);return;
|
|
|
|
- }
|
|
|
|
- _this.$message("数据表更新成功");
|
|
|
|
- _this.$emit("onClose");
|
|
|
|
- })
|
|
|
|
- }else{
|
|
|
|
- createSourceData(data).then(res=>{
|
|
|
|
- if(res.status!=200){
|
|
|
|
- _this.$message(res.message);return;
|
|
|
|
- }
|
|
|
|
- _this.$message("数据表创建成功");
|
|
|
|
- _this.$emit("onClose");
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- //(2)渲染excel
|
|
|
|
- initExcel() {
|
|
|
|
- let _this=this;
|
|
|
|
|
|
+ if (_this.dataForm.code == "") {
|
|
|
|
+ _this.$alert("请填写数据表编码");
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ if (_this.dataForm.name == "") {
|
|
|
|
+ _this.$alert("请填写数据表名称");
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ if (_this.dataForm.sourceData.exportJson == null) {
|
|
|
|
+ _this.$alert("请选择上传excel文件");
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ let data = JSON.parse(JSON.stringify(_this.dataForm));
|
|
|
|
+ data.source_data = JSON.stringify(data.sourceData);
|
|
|
|
+ delete data.sourceData;
|
|
|
|
+ if (data.id > 0) {
|
|
|
|
+ updateSourceData(data).then((res) => {
|
|
|
|
+ if (res.status != 200) {
|
|
|
|
+ _this.$message(res.message);
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ _this.$message.success("数据表更新成功");
|
|
|
|
+ _this.$emit("onClose");
|
|
|
|
+ _this.$router.go(-1);
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ createSourceData(data).then((res) => {
|
|
|
|
+ if (res.status != 200) {
|
|
|
|
+ _this.$message(res.message);
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ _this.$message.success("数据表创建成功");
|
|
|
|
+ _this.$emit("onClose");
|
|
|
|
+ _this.$router.go(-1);
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
|
|
- // let exportJson=this.dataForm.source_data.exportJson;
|
|
|
|
- // let luckysheetfile=this.dataForm.source_data.luckysheetfile;
|
|
|
|
- luckysheet.destroy();
|
|
|
|
- //初始化excel
|
|
|
|
- luckysheet.create({
|
|
|
|
- container: 'luckysheet', //dom id
|
|
|
|
- data: _this.dataForm.sourceData.exportJson.sheets, //excel数据
|
|
|
|
- lang: 'zh',
|
|
|
|
- hook:{
|
|
|
|
- cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
|
|
|
|
|
|
+ //(2)渲染excel
|
|
|
|
+ initExcel() {
|
|
|
|
+ let _this = this;
|
|
|
|
|
|
- },
|
|
|
|
|
|
+ // let exportJson=this.dataForm.source_data.exportJson;
|
|
|
|
+ // let luckysheetfile=this.dataForm.source_data.luckysheetfile;
|
|
|
|
+ luckysheet.destroy();
|
|
|
|
+ //初始化excel
|
|
|
|
+ luckysheet.create({
|
|
|
|
+ container: "luckysheet", //dom id
|
|
|
|
+ data: _this.dataForm.sourceData.exportJson.sheets, //excel数据
|
|
|
|
+ lang: "zh",
|
|
|
|
+ hook: {
|
|
|
|
+ cellUpdated: function (r, c, oldValue, newValue, isRefresh) {},
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ beforeAvatarUpload(e) {
|
|
|
|
+ let _this = this;
|
|
|
|
+ _this.fileLoadStatus = false;
|
|
|
|
+ if (
|
|
|
|
+ e.type ==
|
|
|
|
+ "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
|
|
|
+ ) {
|
|
|
|
+ _this.fileLoadStatus = true;
|
|
|
|
+ _this.fileList = [e];
|
|
|
|
+ //处理excel文件
|
|
|
|
+ LuckyExcel.transformExcelToLucky(
|
|
|
|
+ e,
|
|
|
|
+ (exportJson, luckysheetfile) => {
|
|
|
|
+ this.dataForm.sourceData = {
|
|
|
|
+ exportJson: exportJson,
|
|
|
|
+ luckysheetfile: luckysheetfile,
|
|
|
|
+ };
|
|
|
|
+ this.initExcel();
|
|
},
|
|
},
|
|
- });
|
|
|
|
- },
|
|
|
|
- beforeAvatarUpload(e){
|
|
|
|
- let _this=this;
|
|
|
|
- _this.fileLoadStatus=false;
|
|
|
|
- if( e.type=='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'){
|
|
|
|
- _this.fileLoadStatus=true;
|
|
|
|
- _this.fileList=[e]
|
|
|
|
- //处理excel文件
|
|
|
|
- LuckyExcel.transformExcelToLucky(e, (exportJson, luckysheetfile) => {
|
|
|
|
- this.dataForm.sourceData={
|
|
|
|
- exportJson:exportJson,
|
|
|
|
- luckysheetfile:luckysheetfile,
|
|
|
|
- }
|
|
|
|
- this.initExcel();
|
|
|
|
- },error =>{
|
|
|
|
- this.$message.error(error)
|
|
|
|
- });
|
|
|
|
- }else{
|
|
|
|
- this.$message("请选择excel文件");
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ (error) => {
|
|
|
|
+ this.$message.error(error);
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
+ } else {
|
|
|
|
+ this.$message("请选择excel文件");
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
- @import './dataInfo.scss'
|
|
|
|
|
|
+@import "./dataInfo.scss";
|
|
</style>
|
|
</style>
|