zhzf/client/src/views/xzzfgl/jcbgl.vue

<template>
  <browser :component-loading="componentLoading"
           :api-config="apiConfig"
           :table-config="tableConfig"
           :permissions="permissions"
           :dialog-config="dialogConfig"
           :actions="actions"
           :default-query-params="queryParams"
           @update:query-params="queryParams = $event"
           @update:actions="actions = $event"
           @update:dialog-config="dialogConfig = $event">
    <template #queryPanel="{ queryParams: qp }">
      <el-form ref="queryForm" :model="qp" label-width="100px">
        <el-row class="query-condition">
m-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <el-table-column prop="checklistName" label="检查表" min-width="300"/>
    <el-table-column prop="description" label="描述" min-width="300" show-overflow-tooltip/>
    <el-table-column align="center" label="启用状态" prop="enabled" min-width="150">
      <template #default="scope">
        <el-switch v-model="scope.row.enabled"
                   :disabled="scope.row.isRemove"
                   @change="updateEnabled(scope.row)"
                   :active-value="true"
                   :inactive-value="false"
                   active-text="启用"
                   inactive-text="停用"
                   active-color="#13ce66"
                   inactive-color="#ff4949"/>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" min-width="150"/>
    <template #dialogContent="{ dialogConfig: dc }">
      <el-row>
        <el-col :span="24">
          <el-form-item label="检查表" prop="checklistName">
            <el-input :disabled="dc.mode === 'detail'" v-model="dc.data.checklistName"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="描述" prop="description">
            <el-input :disabled="dc.mode === 'detail'" type="textarea" v-model="dc.data.description"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否启用" prop="enabled">
            <el-switch :disabled="dc.mode === 'detail'" v-model="dc.data.enabled" :active-value="true"
                       :inactive-value="false" active-text="启用" inactive-text="停用" active-color="#13ce66"
                       inactive-color="#ff4949"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="dc.mode ==='detail'" label="创建时间" prop="createTime">
            <el-input :disabled="true" v-model="dc.data.createTime"/>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </browser>
</template>
<script setup>
import {reactive, toRefs} from 'vue'
import Browser from '@/components/Browser.vue'
import {ElMessage} from "element-plus"
import checklists from "@/api/lawenforcement/Checklist.js"

const state = reactive({
  componentLoading: false,
  permissions: {
    query: true,
    add: true,
    modify: true,
    detail: true,
    delete: true,
    deleteAll: true,
    importFile: false,
    exportFile: false,
    exportSelectFile: false,
    downloadTemp: false,
    canDeleteCustom: (row) => {
      return !row.isRemove
    },
    canModifyCustom: (row) => {
      return !row.isRemove
    }
  },
  tableConfig: {
    hasControlColumn: true,
    controlWidth: '150',
    tableLoading: false,
    selectable: (row) => {
      return !row.isRemove
    }
  },
  apiConfig: {
    api: checklists,
    modelId: 'checklistId',
  },
  dialogConfig: {
    type: 'min',
    show: false,
    mode: 'detail',
    formLabelWidth: '110px',
    baseTitle: '检查表',
    loading: false,
    rules: {
      checklistName: [{required: true, message: '检查表不能为空', trigger: 'change'}, {
        min: 0,
        max: 50,
        message: '检查表不能超过50',
        trigger: 'change'
      }],
      description: [{min: 0, max: 2000, message: '描述不能超过2000', trigger: 'change'}],
      enabled: [{required: true, message: '是否启用不能为空', trigger: 'change'}]
    },
    data: {},
    actions: {}
  },
  actions: {
    add: handleAdd
  },
  queryParams: {
    isRemove: false
  }
})

const {componentLoading, permissions, tableConfig, apiConfig, dialogConfig, actions, queryParams} = toRefs(state)

function handleAdd() {
  dialogConfig.value.mode = 'add'
  dialogConfig.value.title = '新增检查表'
  dialogConfig.value.data = {
    enabled: true
  }
  dialogConfig.value.show = true
}

function updateEnabled(row) {
  tableConfig.value.tableLoading = true
  apiConfig.value.api.modify(row[apiConfig.value.modelId], row).then(rs => {
    tableConfig.value.tableLoading = false
    actions.value.query()
    if (rs.success) {
      ElMessage.success('操作成功')
    } else {
      throw new Error('操作失败')
    }
  })
}

</script>
<style lang="scss" scoped>

</style>