Source/BladeX-Tool/blade-starter-develop/src/main/resources/templates/element/sub/sub.vue.btl

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,358 @@
<template>
  <basic-container>
    <div class="avue-crud">
      <el-row :hidden="!search" style="padding:5px">
        <!-- æŸ¥è¯¢æ¨¡å— -->
        <el-form :inline="true" :size="option.size" :model="query">
          <template>
#for(x in prototypes) {
  #if(x.isQuery==1){
            <el-form-item label="字段">
              <el-input v-model="query.${x.propertyName!}" placeholder="请输入${x.comment!}"></el-input>
            </el-form-item>
  #}
#}
          </template>
          <!-- æŸ¥è¯¢æŒ‰é’® -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜索</el-button>
            <el-button icon="el-icon-delete" @click="searchReset()">清空</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <div class="avue-crud__menu">
          <!-- å¤´éƒ¨å·¦ä¾§æŒ‰é’®æ¨¡å— -->
          <div class="avue-crud__left">
            <el-button :size="option.size" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
            <el-button :size="option.size" type="danger" icon="el-icon-delete" @click="handleDelete" plain>删除
            </el-button>
          </div>
          <!-- å¤´éƒ¨å³ä¾§æŒ‰é’®æ¨¡å— -->
          <div class="avue-crud__right">
            <el-button :size="option.size" icon="el-icon-refresh" @click="searchChange" circle></el-button>
            <el-button :size="option.size" icon="el-icon-search" @click="searchHide" circle></el-button>
          </div>
        </div>
      </el-row>
      <el-row>
        <!-- åˆ—表模块 -->
        <el-table ref="table" v-loading="loading" :size="option.size" @selection-change="selectionChange" :data="data"
                  style="width: 100%"
                  :border="option.border">
          <el-table-column type="selection" v-if="option.selection" width="55" align="center"></el-table-column>
          <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>
          <el-table-column v-if="option.index" label="\#" type="index" width="50" align="center">
          </el-table-column>
          <template v-for="(item,index) in option.column">
            <!-- table字段 -->
            <el-table-column v-if="item.hide!==true"
                             :prop="item.prop"
                             :label="item.label"
                             :width="item.width"
                             :key="index">
            </el-table-column>
          </template>
          <!-- æ“ä½œæ æ¨¡å— -->
          <el-table-column prop="menu" label="操作" :width="180" align="center">
            <template slot-scope="{row}">
              <el-button :size="option.size" type="text" icon="el-icon-view" @click="handleView(row)">查看</el-button>
              <el-button :size="option.size" type="text" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
              <el-button :size="option.size" type="text" icon="el-icon-delete" @click="rowDel(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <!-- åˆ†é¡µæ¨¡å— -->
        <el-pagination
          align="right" background
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </el-row>
      <!-- è¡¨å•æ¨¡å— -->
      <el-dialog :title="title" :visible.sync="box" width="50%" :before-close="beforeClose" append-to-body>
        <el-form :disabled="view" :size="option.size" ref="form" :model="form" label-width="80px">
          <!-- è¡¨å•å­—段 -->
#for(x in prototypes) {
  #if(x.isForm!=0){
    #if(x.componentType=="input"){
          <el-form-item label="${x.comment!}" prop="${x.propertyName!}">
            <el-input v-model="form.${x.propertyName!}" placeholder="请输入${x.comment!}"/>
          </el-form-item>
    #}else if(x.componentType=="textarea"){
          <el-form-item label="${x.comment!}" prop="${x.propertyName!}">
            <el-input type="textarea" :rows="5" v-model="form.${x.propertyName!}" placeholder="请输入${x.comment!}"/>
          </el-form-item>
    #}else if(x.componentType=="select"){
          <el-form-item label="${x.comment!}" prop="${x.propertyName!}">
              <el-select v-model="form.${x.propertyName!}" clearable placeholder="请选择${x.comment!}">
                  <el-option
                    v-for="item in ${x.propertyName!}Data"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey">
                  </el-option>
              </el-select>
          </el-form-item>
    #}else if(x.componentType=="tree"){
          <el-form-item label="${x.comment!}" prop="${x.propertyName!}">
              <el-select v-model="form.${x.propertyName!}" clearable placeholder="请选择${x.comment!}">
                  <el-option
                    v-for="item in ${x.propertyName!}Data"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey">
                  </el-option>
              </el-select>
          </el-form-item>
    #}else if(x.componentType=="radio"){
          <el-form-item label="${x.comment!}" prop="${x.propertyName!}">
              <el-radio-group v-model="form.${x.propertyName!}">
                <el-radio v-for="(item,index) in ${x.propertyName!}Data" :key="index" :label="item.dictKey">
                 {{item.dictValue}}
                </el-radio>
              </el-radio-group>
          </el-form-item>
    #}else if(x.componentType=="checkbox"){
          <el-form-item label="${x.comment!}" prop="${x.propertyName!}">
              <el-checkbox-group v-model="form.${x.propertyName!}">
                <el-checkbox v-for="(item,index) in ${x.propertyName!}Data" :label="item.dictValue" :key="index">{{item.dictValue}}</el-checkbox>
              </el-checkbox-group>
          </el-form-item>
    #}else if(x.componentType=="switch"){
          <el-form-item label="${x.comment!}" prop="${x.propertyName!}">
            <el-switch v-model="form.${x.propertyName!}" </el-switch>
          </el-form-item>
    #}else if(x.componentType=="date"){
          <el-form-item label="${x.comment!}" prop="${x.propertyName!}">
            <el-date-picker v-model="form.${x.propertyName!}" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择${x.comment!}"></el-date-picker>
          </el-form-item>
    #}
  #}
#}
        </el-form>
        <!-- è¡¨å•æŒ‰é’® -->
        <span v-if="!view" slot="footer" class="dialog-footer">
          <el-button type="primary" icon="el-icon-circle-check" :size="option.size" @click="handleSubmit">提 äº¤</el-button>
          <el-button icon="el-icon-circle-close" :size="option.size" @click="box = false">取 æ¶ˆ</el-button>
        </span>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
  import {getList, getDetail, add, update, remove} from "@/api/${serviceCode!}/${modelCode!}";
  import option from "@/const/${serviceCode!}/${modelCode!}";
  import {mapGetters} from "vuex";
  import {getDictionary} from '@/api/system/dict'

export default {
  props: {
    mainId: {
      type: String
    },
  },
  data() {
    return {
      // å¼¹æ¡†æ ‡é¢˜
      title: '',
      // æ˜¯å¦å±•ç¤ºå¼¹æ¡†
      box: false,
      // æ˜¯å¦æ˜¾ç¤ºæŸ¥è¯¢
      search: true,
      // åŠ è½½ä¸­
      loading: true,
      // æ˜¯å¦ä¸ºæŸ¥çœ‹æ¨¡å¼
      view: false,
      // æŸ¥è¯¢ä¿¡æ¯
      query: {},
      // åˆ†é¡µä¿¡æ¯
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 40
      },
      // è¡¨å•æ•°æ®
      form: {},
      // é€‰æ‹©è¡Œ
      selectionList: [],
      // è¡¨å•é…ç½®
      option: option,
      // è¡¨å•åˆ—表
      data: [],
#for(x in prototypes) {
    #if(isNotEmpty(x.dictCode)){
      // ${x.comment!}字典数据
      ${x.propertyName!}Data: [],
    #}
#}
    }
  },
  mounted() {
    this.init();
    this.onLoad(this.page, {${subFkIdHump!}: this.mainId});
  },
  computed: {
    ...mapGetters(["permission"]),
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  watch: {
    'mainId'() {
      this.onLoad(this.page, {${subFkIdHump!}: this.mainId});
    }
  },
  methods: {
    init() {
#for(x in prototypes) {
    #if(isNotEmpty(x.dictCode)){
      getDictionary({code: '${x.dictCode!}'}).then(res => {
        this.${x.propertyName!}Data = res.data.data;
      });
    #}
#}
    },
    searchHide() {
      this.search = !this.search;
    },
    searchChange() {
      this.onLoad(this.page, {${subFkIdHump!}: this.mainId});
    },
    searchReset() {
      this.query = {};
      this.page.currentPage = 1;
      this.onLoad(this.page, {${subFkIdHump!}: this.mainId});
    },
    handleSubmit() {
      this.form.${subFkIdHump!} = this.mainId;
      if (!this.form.id) {
        add(this.form).then(() => {
          this.box = false;
          this.onLoad(this.page, {${subFkIdHump!}: this.mainId});
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
      } else {
        update(this.form).then(() => {
          this.box = false;
          this.onLoad(this.page, {${subFkIdHump!}: this.mainId});
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        })
      }
    },
    handleAdd() {
      this.title = '新增'
      this.form = {}
      this.box = true
    },
    handleEdit(row) {
      this.title = '编辑'
      this.box = true
      getDetail(row.id).then(res => {
        this.form = res.data.data;
      });
    },
    handleView(row) {
      this.title = '查看'
      this.view = true;
      this.box = true;
      getDetail(row.id).then(res => {
        this.form = res.data.data;
      });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.selectionClear();
          this.onLoad(this.page, {${subFkIdHump!}: this.mainId});
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page, {${subFkIdHump!}: this.mainId});
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    beforeClose(done) {
      done()
      this.form = {};
      this.view = false;
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.table.clearSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page, {${subFkIdHump!}: this.mainId});
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page, {${subFkIdHump!}: this.mainId});
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 20px;
}
</style>