yos_web/src/views/printmodel/design/components/bindData.vue

<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="绑定数据字段" name="first"></el-tab-pane>
      <el-tab-pane label="数据集" name="second"></el-tab-pane>
    </el-tabs>
    <div v-if="activeName === 'first'">
      <div v-for="(item,idx) in panels" :key="idx" class="mt-10">
        <div v-if="item.printElementType.type === 'text'">
          <p class="preview__item">{{item.options.title}}</p>
          <el-select size="mini" v-model="item.options.sys_printdatasetid" placeholder="请选择" @click.native="act_DataBaseID = idx" @change="queryDataBaseDetail">
            <el-option
              v-for="i in databastlist"
              :key="i.sys_printdatasetid"
              :label="i.datasetname"
              :value="i.sys_printdatasetid">
            </el-option>
          </el-select>&nbsp;
          <el-select size="mini" v-model="item.options.field" :disabled="idx !== act_DataBaseID" placeholder="请选择" @change="onChange">
            <el-option
              v-for="i in sys_printdataset"
              :key="i.sys_printdataset_columnsid"
              :label="i.column_name"
              :value="i.column_name"
              @visible-change="visibleChange">
            </el-option>
          </el-select>
        </div>
        <div v-if="item.printElementType.type === 'table'">
          <p style="font-size:12px">表格数据</p>
          <div>
            <div v-for="td in item.options.columns[0]" :key="td.index">
              <p class="preview__item">{{td.title}}</p>
              <el-select size="mini" v-model="item.options.sys_printdatasetid" placeholder="请选择" @click.native="act_DataBaseID = idx" @change="queryDataBaseDetail">
                <el-option
                  v-for="i in databastlist"
                  :key="i.sys_printdatasetid"
                  :label="i.datasetname"
                  :value="i.sys_printdatasetid">
                </el-option>
              </el-select>&nbsp;
              <el-select size="mini" v-model="item.options.field" :disabled="idx !== act_DataBaseID" placeholder="请选择" @change="onChange">
                <el-option
                  v-for="i in sys_printdataset"
                  :key="i.sys_printdataset_columnsid"
                  :label="i.column_name"
                  :value="i.column_name"
                  @visible-change="visibleChange">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <el-button type="primary" size="mini" @click="saveJson">保 存</el-button>
    </div>
    <div v-else>
      <div v-for="item in databastlist" :key="item.index" @click="queryDataBaseDetail(item.sys_printdatasetid)">{{item.datasetname}}</div>
      <div>
        <el-input style="margin-bottom:10px" size="small" v-model="database.datasetname" placeholder="请输入数据集名称"></el-input>
        <el-input size="small" type="textarea" v-model="database.sqlstr" placeholder="请输入sql语句" :autosize="{ minRows: 3, maxRows: 6 }"></el-input>
      </div>
      <el-button type="primary" size="small" @click="saveDatabase">保存</el-button>
    </div>
  </div>
</template>

<script>

export default {
  props:['temp'],
  computed:{
    formComponent(){
      if (this.dialogFormVisible) {
        return ()=>import(`@/style/sv-print.css`)
      } else {
        return
      }
    }
  },
  data () {
    return {
      activeName:'first',
      template:{},
      panels:{},
      databastlist:[],
      sys_printdataset:[],
      databastlist:[],
      act_DataBaseID:null,
      modeData:{},
      database:{}
    }
  },
  methods:{
    onDesigned () {},
    async queryMode (id) {
      this.show = false
        const res = await this.$api.requested({
          "id": 20221121155901,
          "content": { 
            "sys_printmodelid":id
          }
        })
        this.modeData = res.data
        this.panels = JSON.parse(res.data.modeljson).panels[0].printElements
        this.template = JSON.parse(res.data.modeljson)
        this.show = true
    }, 
    async saveJson () {
      const res = await this.$api.requested({
        "id": 20221121160001,
        "content": { 
          "sys_printmodelid": this.modeData.sys_printmodelid,
          "systemappid":this.modeData.systemappid,
          "modelname":this.modeData.modelname,
          "modeljson":this.template,
          "isused":this.modeData.isused
        }
      })
    },
    async saveDatabase () {
      this.database.sys_printmodelid = this.modeData.sys_printmodelid
      const res = await this.$api.requested({
        "id": 20221121160301,
        "content": this.database,
      })
    },
    queryDataBaseDetail () {},
    onChange () {},
    onClose () {
      this.$emit('onClose')
    },
  },
  watch:{
    temp (val) {
       this.template = JSON.parse(val)
       this.panels = this.template.panels[0].printElements
    }
  },
  mounted () {
    var _this = this;
    document.onkeydown = function(e) {
      let key = window.event.keyCode;
      if (key == 83 && event.ctrlKey) {
      //  _this.template = JSON.parse(localStorage.getItem('sv-print-preferences'))['default-template']
      //  _this.panels =  _this.template.panels[0].printElements
      //  _this.saveJson()
      }
    };
  }
}

</script>
<style scoped>
.preview{
  position: fixed;
  min-height: 600px;
  width: 550px;
  top:10px;
  right:30px;
  z-index: 99;
  background: #fff;
  box-shadow: 0 2px 4px #0000004d;
  padding: 10px;
}
.preview__item{
  position: relative;
  font-size: 12px;
  line-height: 30px;
}
.preview__item__table{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.preview__item__table p{
  flex: 1;
  width:80px ;
  border: 1px solid #f1f2f3;
  font-size: 12px;
  text-align: center;
  line-height: 30px;
  margin-left: -1px;
}

</style>