部门启用停用状态显示 --杨帆

src/views/system/dept/index.vue

 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true">
       <el-form-item label="部门名称" prop="deptName">
         <el-input
           v-model="queryParams.deptName"
@@ -38,26 +38,35 @@
     </el-form>
 
     <el-table
-      :data="deptList"
       v-loading="Loading"
+      :data="deptList"
       row-key="businessId"
       default-expand-all
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
     >
-<!--      <el-table-column-->
-<!--        label="序号"-->
-<!--        type="index"-->
-<!--        width="50">-->
-<!--      </el-table-column>-->
-<!--      <el-table-column-->
-<!--      label="部门编号">-->
-<!--        <template v-slot:default="scope">-->
-<!--          {{ scope.row.businessId }}-->
-<!--        </template>-->
-<!--      </el-table-column>-->
+      <!--      <el-table-column-->
+      <!--        label="序号"-->
+      <!--        type="index"-->
+      <!--        width="50">-->
+      <!--      </el-table-column>-->
+      <!--      <el-table-column-->
+      <!--      label="部门编号">-->
+      <!--        <template v-slot:default="scope">-->
+      <!--          {{ scope.row.businessId }}-->
+      <!--        </template>-->
+      <!--      </el-table-column>-->
       <el-table-column :show-overflow-tooltip="true" prop="deptName" label="部门名称" width="260" />
       <el-table-column :show-overflow-tooltip="true" prop="orderNum" label="排序" width="200" />
-      <el-table-column :show-overflow-tooltip="true" prop="flag" label="部门状态" :formatter="statusFormat" width="100" />
+      <el-table-column label="状态" align="center" width="100">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.flag"
+            active-value="1"
+            inactive-value="0"
+            @change="handleStatusChange(scope.row)"
+          />
+        </template>
+      </el-table-column>
       <el-table-column :show-overflow-tooltip="true" label="创建时间" align="center" prop="createDate" width="200">
         <template slot-scope="scope">
           <span>{{ scope.row.createDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
@@ -96,13 +105,13 @@
             style="color: #49cec9"
             @click="handleUpdate(scope.row)"
           >修改</el-button>
-<!--          <el-switch-->
-<!--            v-model="scope.row.flag"-->
-<!--            v-hasPermi="['system:dept:toggle']"-->
-<!--            active-value="0"-->
-<!--            inactive-value="1"-->
-<!--            @change="handleStatusChange(scope.row)"-->
-<!--          />-->
+          <!--          <el-switch-->
+          <!--            v-model="scope.row.flag"-->
+          <!--            v-hasPermi="['system:dept:toggle']"-->
+          <!--            active-value="0"-->
+          <!--            inactive-value="1"-->
+          <!--            @change="handleStatusChange(scope.row)"-->
+          <!--          />-->
           <el-button
             v-hasPermi="['system:dept:add']"
             size="mini"
@@ -156,16 +165,20 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="部门状态">
-<!--              <el-radio-group v-model="form.flag">-->
-<!--                <el-radio label="0">正常</el-radio>-->
-<!--                <el-radio label="1">停用</el-radio>-->
-<!--              </el-radio-group>-->
+              <!--              <el-radio-group v-model="form.flag">-->
+              <!--                <el-radio label="0">正常</el-radio>-->
+              <!--                <el-radio label="1">停用</el-radio>-->
+              <!--              </el-radio-group>-->
+              <!--              <el-radio-group v-model="form.flag">-->
+              <!--                <el-radio-->
+              <!--                  v-for="dict in statusOptions"-->
+              <!--                  :key="dict.dictValue"-->
+              <!--                  :label="dict.dictValue"-->
+              <!--                >{{dict.dictLabel}}</el-radio>-->
+              <!--              </el-radio-group>-->
               <el-radio-group v-model="form.flag">
-                <el-radio
-                  v-for="dict in statusOptions"
-                  :key="dict.dictValue"
-                  :label="dict.dictValue"
-                >{{dict.dictLabel}}</el-radio>
+                <el-radio label="1">启用</el-radio>
+                <el-radio label="0">停用</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
@@ -183,6 +196,8 @@
 import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from '@/api/system/dept'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { changeRoleStatus } from '@/api/system/role'
+import { updateMenu } from '@/api/system/menu'
 
 export default {
   name: 'Dept',
@@ -304,7 +319,24 @@ export default {
       }
       this.resetForm('form')
     },
-
+    // 状态修改
+    handleStatusChange(row) {
+      const text = row.flag === '0' ? '停用' : '启用'
+      this.$confirm(`“${row.deptName}”部门即将被${text}，是否继续？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return updateDept(row)
+      }).then(() => {
+        this.$message({
+          message: text + '成功',
+          type: 'success'
+        })
+      }).catch(function() {
+        row.flag = row.flag === '0' ? '1' : '0'
+      })
+    },
     /** 新增按钮操作 */
     handleAdd(row) {
       this.reset()