|
@@ -1,167 +1,173 @@
|
|
<template>
|
|
<template>
|
|
- <div class="com-formual">
|
|
|
|
- <el-form >
|
|
|
|
- <el-form-item >
|
|
|
|
-
|
|
|
|
- <el-select v-model="tableCode" placeholder="请选择状态" @change="onChangeTab" size="large" style="width:100%;">
|
|
|
|
- <el-option
|
|
|
|
- v-for="(item,index) in tableList"
|
|
|
|
- :key="item.id"
|
|
|
|
- :label="item.name"
|
|
|
|
- :value="index"
|
|
|
|
- />
|
|
|
|
- </el-select>
|
|
|
|
-
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item style="min-height:500px;" v-if="fileLoadStatus">
|
|
|
|
- <div id="luckysheet" ref="luckysheet" style="width:100%;height:500px;"> </div>
|
|
|
|
- </el-form-item>
|
|
|
|
-
|
|
|
|
- </el-form>
|
|
|
|
-
|
|
|
|
- <el-dialog
|
|
|
|
- :visible.sync="showConfirm"
|
|
|
|
- :close-on-click-modal="false"
|
|
|
|
- title="数据确认"
|
|
|
|
- width="500"
|
|
|
|
- align-center
|
|
|
|
- :append-to-body="true"
|
|
|
|
- >
|
|
|
|
- <div>当前工作表:{{position.sheet}} </div>
|
|
|
|
- <!-- <div>当前选择的位置:ROW:{{position.r}}, COL:{{position.c}} </div> -->
|
|
|
|
- <div>当前取值:{{position.value}}</div>
|
|
|
|
- <template #footer>
|
|
|
|
- <div class="dialog-footer">
|
|
|
|
- <el-button @click="showConfirm = false">关闭</el-button>
|
|
|
|
- <el-button type="primary" @click="onConfirm">
|
|
|
|
- 确认选择
|
|
|
|
- </el-button>
|
|
|
|
- </div>
|
|
|
|
- </template>
|
|
|
|
- </el-dialog>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="com-formual"
|
|
|
|
+ v-loading="loading"
|
|
|
|
+ element-loading-text="数据加载中..."
|
|
|
|
+ >
|
|
|
|
+ <el-form>
|
|
|
|
+ <el-form-item>
|
|
|
|
+ <el-select
|
|
|
|
+ v-model="tableCode"
|
|
|
|
+ placeholder="请选择数据表"
|
|
|
|
+ @change="onChangeTab"
|
|
|
|
+ size="large"
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ >
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="(item, index) in tableList"
|
|
|
|
+ :key="item.id"
|
|
|
|
+ :label="item.name"
|
|
|
|
+ :value="index"
|
|
|
|
+ />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item style="min-height: 500px" v-if="fileLoadStatus">
|
|
|
|
+ <div
|
|
|
|
+ id="luckysheet"
|
|
|
|
+ ref="luckysheet"
|
|
|
|
+ style="width: 100%; height: 500px"
|
|
|
|
+ ></div>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+
|
|
|
|
+ <el-dialog
|
|
|
|
+ :visible.sync="showConfirm"
|
|
|
|
+ :close-on-click-modal="false"
|
|
|
|
+ title="数据确认"
|
|
|
|
+ width="500"
|
|
|
|
+ align-center
|
|
|
|
+ :append-to-body="true"
|
|
|
|
+ >
|
|
|
|
+ <div>当前工作表:{{ position.sheet }}</div>
|
|
|
|
+ <!-- <div>当前选择的位置:ROW:{{position.r}}, COL:{{position.c}} </div> -->
|
|
|
|
+ <div>当前取值:{{ position.value }}</div>
|
|
|
|
+ <template #footer>
|
|
|
|
+ <div class="dialog-footer">
|
|
|
|
+ <el-button @click="showConfirm = false">关闭</el-button>
|
|
|
|
+ <el-button type="primary" @click="onConfirm"> 确认选择 </el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-
|
|
|
|
- import{searchSourceData,deleteSourceData} from'@/api/sourceData';
|
|
|
|
- import LuckyExcel from 'luckyexcel'; //引入LuckyExcel
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- export default{
|
|
|
|
- name:"SourceData",
|
|
|
|
- emits:['onPicked'],
|
|
|
|
-
|
|
|
|
- components:{
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- data(){
|
|
|
|
- return{
|
|
|
|
- tableCode:'',
|
|
|
|
- tableList:[],
|
|
|
|
- showConfirm:false,
|
|
|
|
- fileLoadStatus:false,
|
|
|
|
- position:{
|
|
|
|
- tb:'',
|
|
|
|
- c:0,
|
|
|
|
- r:0,
|
|
|
|
- sheet:'',
|
|
|
|
- value:''
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- mounted(){
|
|
|
|
- this.initTableList();
|
|
|
|
- },
|
|
|
|
- methods:{
|
|
|
|
-
|
|
|
|
- onConfirm(e){
|
|
|
|
- this.showConfirm=false;
|
|
|
|
- this.$emit("onPicked",this.position);
|
|
|
|
|
|
+import {
|
|
|
|
+ searchSourceData,
|
|
|
|
+ deleteSourceData,
|
|
|
|
+ getSourceData,
|
|
|
|
+} from "@/api/sourceData";
|
|
|
|
+import LuckyExcel from "luckyexcel"; //引入LuckyExcel
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: "SourceData",
|
|
|
|
+ emits: ["onPicked"],
|
|
|
|
+
|
|
|
|
+ components: {},
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ tableCode: "",
|
|
|
|
+ tableList: [],
|
|
|
|
+ showConfirm: false,
|
|
|
|
+ fileLoadStatus: false,
|
|
|
|
+ position: {
|
|
|
|
+ tb: "",
|
|
|
|
+ c: 0,
|
|
|
|
+ r: 0,
|
|
|
|
+ sheet: "",
|
|
|
|
+ value: "",
|
|
},
|
|
},
|
|
|
|
+ loading: false, // 添加 loading 状态控制
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.initTableList();
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ onConfirm(e) {
|
|
|
|
+ this.showConfirm = false;
|
|
|
|
+ this.$emit("onPicked", this.position);
|
|
|
|
+ },
|
|
|
|
|
|
- onChangeTab(e){
|
|
|
|
- let _this=this;
|
|
|
|
- let item=_this.tableList[e];
|
|
|
|
- _this.fileLoadStatus=true;
|
|
|
|
-
|
|
|
|
- item.sourceData=JSON.parse(item.source_data);
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- _this.position.tb=item.code;
|
|
|
|
- _this.$nextTick(() => {
|
|
|
|
- luckysheet.destroy();
|
|
|
|
- luckysheet.create({
|
|
|
|
- container: 'luckysheet', //dom id
|
|
|
|
- data: item.sourceData.exportJson.sheets, //excel数据
|
|
|
|
- lang: 'zh',
|
|
|
|
- showinfobar: false, // 是否显示顶部信息栏
|
|
|
|
- showstatisticBar: false, // 是否显示底部计数栏
|
|
|
|
- sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
|
|
|
|
- allowEdit: false, // 是否允许前台编辑
|
|
|
|
- enableAddRow: false, // 是否允许增加行
|
|
|
|
- enableAddCol: false, // 是否允许增加列
|
|
|
|
- sheetFormulaBar: false, // 是否显示公式栏
|
|
|
|
- enableAddBackTop: false, // 返回头部按钮
|
|
|
|
- showsheetbar: true, // 是否显示底部sheet页按钮
|
|
|
|
- enableAddRow: false,//允许添加行
|
|
|
|
- // 自定义配置底部sheet页按钮
|
|
|
|
- showsheetbarConfig: {
|
|
|
|
- add: false,
|
|
|
|
- menu: false,
|
|
|
|
- },
|
|
|
|
- hook:{
|
|
|
|
- cellMousedown: function (cell, position, sheetFile, ctx) {
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- _this.position.sheet=sheetFile.name;
|
|
|
|
-
|
|
|
|
- _this.position.r=position.r;
|
|
|
|
- _this.position.c=position.c;
|
|
|
|
-
|
|
|
|
- if(cell.v){
|
|
|
|
- _this.position.value=cell.v;
|
|
|
|
- }else{
|
|
|
|
- _this.position.value="";
|
|
|
|
- cell.ct.s.map(res=>{
|
|
|
|
- _this.position.value+=res.v;
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- _this.showConfirm=true;
|
|
|
|
|
|
+ onChangeTab(e) {
|
|
|
|
+ let _this = this;
|
|
|
|
+ let item = _this.tableList[e];
|
|
|
|
+ _this.loading = true; // 开始加载
|
|
|
|
+ getSourceData({ id: item.id })
|
|
|
|
+ .then((res) => {
|
|
|
|
+ if (res.status !== 200) return;
|
|
|
|
+ _this.fileLoadStatus = true;
|
|
|
|
+
|
|
|
|
+ item.sourceData = JSON.parse(res.data.source_data);
|
|
|
|
+
|
|
|
|
+ _this.position.tb = item.code;
|
|
|
|
+ _this.$nextTick(() => {
|
|
|
|
+ luckysheet.destroy();
|
|
|
|
+ luckysheet.create({
|
|
|
|
+ container: "luckysheet", //dom id
|
|
|
|
+ data: item.sourceData.exportJson.sheets, //excel数据
|
|
|
|
+ lang: "zh",
|
|
|
|
+ showinfobar: false, // 是否显示顶部信息栏
|
|
|
|
+ showstatisticBar: false, // 是否显示底部计数栏
|
|
|
|
+ sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
|
|
|
|
+ allowEdit: false, // 是否允许前台编辑
|
|
|
|
+ enableAddRow: false, // 是否允许增加行
|
|
|
|
+ enableAddCol: false, // 是否允许增加列
|
|
|
|
+ sheetFormulaBar: false, // 是否显示公式栏
|
|
|
|
+ enableAddBackTop: false, // 返回头部按钮
|
|
|
|
+ showsheetbar: true, // 是否显示底部sheet页按钮
|
|
|
|
+ enableAddRow: false, //允许添加行
|
|
|
|
+ // 自定义配置底部sheet页按钮
|
|
|
|
+ showsheetbarConfig: {
|
|
|
|
+ add: false,
|
|
|
|
+ menu: false,
|
|
},
|
|
},
|
|
- cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
|
|
|
|
- // console.log("r",r);
|
|
|
|
- // console.log("c",c);
|
|
|
|
- // console.log("oldVal",oldValue);
|
|
|
|
- // console.log("newVal",newValue);
|
|
|
|
- // console.log('exportJson',_this.dataForm.source_data.exportJson)
|
|
|
|
|
|
+ hook: {
|
|
|
|
+ cellMousedown: function (cell, position, sheetFile, ctx) {
|
|
|
|
+ _this.position.sheet = sheetFile.name;
|
|
|
|
+
|
|
|
|
+ _this.position.r = position.r;
|
|
|
|
+ _this.position.c = position.c;
|
|
|
|
+
|
|
|
|
+ if (cell.v) {
|
|
|
|
+ _this.position.value = cell.v;
|
|
|
|
+ } else {
|
|
|
|
+ _this.position.value = "";
|
|
|
|
+ cell.ct.s.map((res) => {
|
|
|
|
+ _this.position.value += res.v;
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ _this.showConfirm = true;
|
|
|
|
+ },
|
|
|
|
+ cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
|
|
|
|
+ // console.log("r",r);
|
|
|
|
+ // console.log("c",c);
|
|
|
|
+ // console.log("oldVal",oldValue);
|
|
|
|
+ // console.log("newVal",newValue);
|
|
|
|
+ // console.log('exportJson',_this.dataForm.source_data.exportJson)
|
|
|
|
+ },
|
|
},
|
|
},
|
|
- },
|
|
|
|
|
|
+ });
|
|
});
|
|
});
|
|
- });
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- // _this.dataForm=res.data;
|
|
|
|
- // _this.dataForm.sourceData=JSON.parse(_this.dataForm.source_data);
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- initTableList(){
|
|
|
|
- let _this=this;
|
|
|
|
- searchSourceData({page:1,pageSize:999,status:5}).then(res=>{
|
|
|
|
- if(res.status!=200)return;
|
|
|
|
- _this.tableList=res.data.dataList;
|
|
|
|
})
|
|
})
|
|
- },
|
|
|
|
|
|
+ .finally(() => {
|
|
|
|
+ _this.loading = false; // 结束加载
|
|
|
|
+ });
|
|
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ // _this.dataForm=res.data;
|
|
|
|
+ // _this.dataForm.sourceData=JSON.parse(_this.dataForm.source_data);
|
|
|
|
+ },
|
|
|
|
+ initTableList() {
|
|
|
|
+ let _this = this;
|
|
|
|
+ searchSourceData({ page: 1, pageSize: 999, status: 5 }).then((res) => {
|
|
|
|
+ if (res.status != 200) return;
|
|
|
|
+ _this.tableList = res.data.dataList;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
-@import './index.scss';
|
|
|
|
|
|
+@import "./index.scss";
|
|
</style>
|
|
</style>
|