<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><%=moduleName%>管理</el-breadcrumb-item>
      <el-breadcrumb-item><%=moduleName%>列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片试图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->

      <el-row :gutter="20">
        <el-col :span="7">
          <el-input placeholder="请输入搜索的内容"
                    class="input-with-select"
                    v-model="queryInfo.query"
                    clearable
                    @clear="get<%=tableName%>List">
            <el-button slot="append"
                       icon="el-icon-search"
                       @click="get<%=tableName%>List"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary"   v-if="$hasPermission(['<%=serviceObjName%>Manager.create<%=tableName%>'])"
                     @click="showAddOrEditDialog()">添加<%=moduleName%></el-button>
        </el-col>
      </el-row>
      <!-- <%=moduleName%>列表 -->
      <el-table :data="<%=serviceObjName%>List"
                style="width: 100%"
                border
                stripe>
        <el-table-column type="index"  width="60" 
                         label="序号"> </el-table-column>
        {{table-Columns}}
        <el-table-column label="操作"
                         width="220"  v-if="$hasPermission(['<%=serviceObjName%>Manager.view<%=tableName%>']) || $hasPermission(['<%=serviceObjName%>Manager.edit<%=tableName%>'] || $hasPermission(['<%=serviceObjName%>Manager.delete<%=tableName%>']))">
          <template slot-scope="scope">
           <!-- 查看按钮 -->
            <el-button type="primary" icon="el-icon-document" size="mini" @click="showViewDialog(scope.row.id)"
              v-if="$hasPermission(['<%=serviceObjName%>Manager.view<%=tableName%>'])"> 查看</el-button>
            <!-- 修改按钮 -->
            <el-button type="primary"
                       icon="el-icon-edit"
                       size="mini"
                       @click="showAddOrEditDialog(scope.row.id)"
                        v-if="$hasPermission(['<%=serviceObjName%>Manager.edit<%=tableName%>'])"
                       >编辑</el-button>
            <!-- 删除按钮 -->
            <el-button type="danger"
                       icon="el-icon-delete"
                       size="mini"
                       @click="remove<%=tableName%>ById(scope.row.id)"
                        v-if="$hasPermission(['<%=serviceObjName%>Manager.delete<%=tableName%>'])"
                       >删除</el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNum"
                     :page-sizes="[5, 10, 50, 100]"
                     :page-size="queryInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>

    <!-- 添加或编辑<%=moduleName%>的对话框 -->
    <el-dialog  :title="(addOrEditForm.id > 0 ? '编辑' : '新增') + '<%=moduleName%>'"
               :visible.sync="addOrEditDialogVisible"
               width="60%"
               @close="addOrEditDialogClosed">
      <!-- 内容主体区域 -->

      <el-tabs v-model="activeName">
        <el-tab-pane label="<%=moduleName%>管理"
                     name="first">
          <el-form :model="addOrEditForm"
                   :rules="addOrEditFormRules"
                   ref="addOrEditFormRef"
                   label-width="100px">
            <el-input v-model="addOrEditForm.id"
                      prop="id"
                      type="hidden"></el-input>

            {{form-Rows}}
          </el-form>
        </el-tab-pane>
      </el-tabs>

          <!-- 底部区域 -->
          <span slot="footer"
                class="dialog-footer">
            <el-button @click="addOrEditDialogVisible = false">取 消</el-button>
            <el-button type="primary"
                       @click="addOrEdit<%=tableName%>()">确 定</el-button>
          </span>
    </el-dialog>

    <!-- 查看<%=moduleName%>的对话框 -->
    <el-dialog  :title=" '查看<%=moduleName%>'"
               :visible.sync="viewDialogVisible"
               width="60%"
               @close="viewDialogClosed">
      <!-- 内容主体区域 -->

      <el-tabs v-model="activeName">
        <el-tab-pane label="<%=moduleName%>管理"
                     name="first">
          <el-form :model="viewForm"
                   ref="viewFormRef"
                   label-width="100px">
            <el-input v-model="viewForm.id"
                      prop="id"
                      type="hidden"></el-input>

            {{form-viewRows}}
          </el-form>
        </el-tab-pane>
      </el-tabs>

        
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {

    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10,
      },
      <%=serviceObjName%>List: [],
      total: 0,
      activeName: 'first',
      // 控制添加<%=moduleName%>对话框的显示与隐藏
      addOrEditDialogVisible: false,
      // 添加<%=moduleName%>的表单数据
      addOrEditForm: {
        id: '',
        {{addOrEditForm-properties}}
       
      },
      editState: false, //编辑状态
       viewDialogVisible: false, //查看数据按钮
      // 查看<%=moduleName%>的表单数据
      viewForm: {
        id: '',
        {{addOrEditForm-properties}}
       
      },
      // 添加表单的验证规则对象
      addOrEditFormRules: {
        {{form-rules}}
      },
      // 控制修改<%=moduleName%>对话框的显示与隐藏
      editDialogVisible: false,

    }
  },
  created() {
    this.get<%=tableName%>List()
  },
  methods: {
    async get<%=tableName%>List() {
      const { data: res } = await this.$http.post(this.$<%=serviceObjName%>ManagerUrl, {
        currentPage: this.queryInfo.pageNum,
        pageSize: this.queryInfo.pageSize,
        filter: {
          queryString: this.queryInfo.query,
        },
      })
      if (res.code !== 200) {
        return this.$message.error('获取<%=moduleName%>列表失败！'+res.message)
      }
      this.<%=serviceObjName%>List = res.data.list
      this.total = res.data.total
      console.log(res)
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pageSize = newSize
      this.get<%=tableName%>List()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryInfo.pageNum = newPage
      this.get<%=tableName%>List()
    },
    // 监听添加<%=moduleName%>对话框的关闭事件
    addOrEditDialogClosed() {
      this.editState = false //编辑状态改为false
      this.addOrEditForm={
        id: '',
        {{addOrEditForm-properties}}
      
      },
      this.$refs.addOrEditFormRef.resetFields()
    },
    // 点击按钮，添加或编辑<%=moduleName%>
    addOrEdit<%=tableName%>() {
      this.$refs.addOrEditFormRef.validate(async (valid) => {
        if (!valid) return

        if (this.addOrEditForm.id > 0) {
          //编辑状态
          // 发起修改<%=moduleName%>信息的数据请求
          const { data: res } = await this.$http.put(
            this.$<%=serviceObjName%>Manager_Edit<%=tableName%>Url,
            this.addOrEditForm
          )

          if (res.code !== 200) {
            return this.$message.error('更新<%=moduleName%>信息失败！'+res.message)
          }

          // 提示修改成功
          this.$message.success('更新<%=moduleName%>信息成功！')
        } else {
          // 可以发起添加<%=moduleName%>的网络请求
          const { data: res } = await this.$http.post(
            this.$<%=serviceObjName%>Manager_Create<%=tableName%>Url,
            this.addOrEditForm
          )

          if (res.code !== 200) {
           return this.$message.error('添加<%=moduleName%>失败！'+res.message)
          }

          this.$message.success('添加<%=moduleName%>成功！')
        }

        // 隐藏添加<%=moduleName%>的对话框
        this.addOrEditDialogVisible = false
        // 重新获取<%=moduleName%>列表数据
        this.get<%=tableName%>List()
      })
    },
    // 根据Id删除对应的<%=moduleName%>信息
    async remove<%=tableName%>ById(id) {
      // 弹框询问<%=moduleName%>是否删除数据
      const confirmResult = await this.$confirm(
        '此操作将永久删除该<%=moduleName%>, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch((err) => err)

      // 如果<%=moduleName%>确认删除，则返回值为字符串 confirm
      // 如果<%=moduleName%>取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }

      const { data: res } = await this.$http.delete(
        this.$<%=serviceObjName%>Manager_Delete<%=tableName%>Url + '?id=' + id
      )

      if (res.code !== 200) {
        return this.$message.error('删除<%=moduleName%>失败！'+res.message)
      }

      this.$message.success('删除<%=moduleName%>成功！')
      this.get<%=tableName%>List()
    },

    // 展示<%=moduleName%>的对话框
    async showAddOrEditDialog(id) {
      this.addOrEditDialogVisible = true
      if (id > 0) {
        //编辑状态
        // console.log(id)
        const { data: res } = await this.$http.get(
          this.$<%=serviceObjName%>Manager_Get<%=tableName%>Url + '?id=' + id
        )

        if (res.code !== 200) {
          return this.$message.error('查询<%=moduleName%>信息失败！'+res.message)  
        }

        this.addOrEditForm = res.data
        this.editState = true
      }

      this.addOrEditDialogVisible = true
    },

    // 展示查看看<%=moduleName%>的对话框
    async showViewDialog(id) {
      this.viewDialogVisible = true
      if (id > 0) {
        //编辑状态
        // console.log(id)
        const { data: res } = await this.$http.get(
          this.$<%=serviceObjName%>Manager_Get<%=tableName%>Url + '?id=' + id
        )

        if (res.code !== 200) {
          return this.$message.error('查询<%=moduleName%>信息失败！'+res.message)  
        }

        this.viewForm = res.data
        
      }

      this.viewDialogVisible = true
    },

      // 监听查询区块链存证对话框的关闭事件
      viewDialogClosed() {

        this.viewForm={
        id: '',
        {{addOrEditForm-properties}}
      
      },

          this.$refs.viewFormRef.resetFields()
      },
  },
}
</script>
<style lang="less" scoped>
</style>
