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

<template>
  <div class="binddata__panel">
    <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">
            <el-option
              v-for="i in databastlist"
              :key="i.sys_printdatasetid"
              :label="i.datasetname"
              :value="i.sys_printdatasetid"
              @click.native="queryDataBaseDetail(i.sys_printdatasetid)"
              @visible-change="visibleChange">
            </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>
            <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"
                @click.native="setTableField(item.options.field = `dataset${i.sys_printdatasetid}`)">
              </el-option>
            </el-select>&nbsp;
            <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="td.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>
      <el-tag style="margin:0 10px 10px 0" type="danger" v-for="item in databastlist" :key="item.index" :disable-transitions="true" effect="dark" size="small" @close="deleteDatabase(item)" closable> {{item.datasetname}}</el-tag>
      <div class="normal-margin">
        <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','modeData'],
  computed:{
    formComponent(){
      if (this.dialogFormVisible) {
        return ()=>import(`@/style/sv-print.css`)
      } else {
        return
      }
    }
  },
  data () {
    return {
      activeName:'first',
      template:{},
      panels:{},
      databastlist:[],
      sys_printdataset:[],
      act_DataBaseID:null,
      modeData:{},
      database:{}
    }
  },
  methods:{
    onDesigned () {},
    async saveJson () {
      console.log(this.modeData)
      this.template.panels[0].printElements = this.panels
      const res = await this.$api.requested({
        "id": 20221121160001,
        "content": { 
          "sys_printmodelid": this.$route.query.id,
          "systemappid":this.modeData.systemappid,
          "modelname":this.modeData.modelname,
          "modeljson":this.template,
          "isused":this.modeData.isused
        }
      })
    },
    async saveDatabase () {
      this.database.sys_printmodelid = this.$route.query.id
      const res = await this.$api.requested({
        "id": 20221121160301,
        "content": this.database,
      })
      this.querDataBase()
    },
    async querDataBase () {
      const res = await this.$api.requested({
        "id": 20221121160201,
        "content": { 
          "sys_printmodelid": this.$route.query.id
        }
      })
      this.databastlist = res.data
    },
    async deleteDatabase (item) {
       const res = await this.$api.requested({
        "id": 20221121160401,
        "content": { 
          "sys_printdatasetid":item.sys_printdatasetid
        }
      })
      this.querDataBase()
    },
    async queryDataBaseDetail (item) {
      const res = await this.$api.requested({
        "id": 20221121160501,
        "content": { 
          "sys_printdatasetid":item
        }
      })
      this.sys_printdataset = res.data
    },
    visibleChange (val) {
      // val?this.queryDataBaseDetail():''
      val?'':this.sys_printdataset = []
    },
    onChange () {},
    onClose () {
      this.$emit('onClose')
    },
    setTableField (item,id) {
      console.log(item,id)
    }
  },
  watch:{
    temp (val) {
       this.template = JSON.parse(val)
       this.panels = this.template.panels[0].printElements
    }
  },
  mounted () {
    this.querDataBase()
  }
}

</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;
}
.binddata__panel{
  height: 600px;
  overflow-y:scroll ;
}
</style>