控制台

src/api/equipment/check.js

@@ -4,7 +4,7 @@ import { exportConfig } from '../system/config'
 // 查询角色列表
 export function listCheck(query) {
   return request({
-    url: '/wbwarehouse/queryWbWarehouseByPagination',
+    url: '/WeHomePage/queryWeHomePtype1',
     method: 'get',
     params: query
   })

src/views/controlPlatform/control.vue

@@ -78,6 +78,45 @@
         </el-row>
       </el-card>
     </div>
+
+    <!--    访客数据-->
+    <div class="controlPlatform-footer">
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <el-card style="height: 393px">
+            <div style="display: flex;justify-content: space-between">
+              <div class="controlSpan_middle">
+                访客数据（今日）
+              </div>
+              <div>
+                当前院内访客: <span style="color: #333333;font-size: 16px;font-weight: bold">20</span>人
+              </div>
+            </div>
+            <el-divider class="chosenOne-divider"/>
+            <div id="echarts-visitor" class="span_1" style="margin-top: -20px">
+              <div id="dataCharts_visitor" ref="chart_data" style="height: 350px"/>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card style="height: 393px">
+            <div style="display: flex;justify-content: space-between">
+              <div class="controlSpan_middle">
+                访客数据（今日）
+              </div>
+              <div>
+                当前院内访客: <span style="color: #333333;font-size: 16px;font-weight: bold">20</span>人
+              </div>
+            </div>
+            <el-divider class="chosenOne-divider"/>
+            <div id="echarts-visitor" class="span_1" style="margin-top: -20px">
+              <div id="dataCharts_visitor" ref="chart_data" style="height: 350px"/>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+<!--    数据统计-->
     <div class="controlPlatform-body">
       <el-row :gutter="10" style="margin-bottom: 10px">
         <el-col :span="16">
@@ -156,63 +195,6 @@
         </el-col>
       </el-row>
     </div>
-    <div class="controlPlatform-footer">
-      <el-row :gutter="10">
-        <el-col :span="10">
-          <el-card style="height: 393px">
-            <div style="display: flex;justify-content: space-between">
-              <div class="controlSpan_middle">
-                访客数据（今日）
-              </div>
-              <div>
-                当前院内访客: <span style="color: #333333;font-size: 16px;font-weight: bold">20</span>人
-              </div>
-            </div>
-            <el-divider class="chosenOne-divider"/>
-            <div id="echarts-visitor" class="span_1" style="margin-top: -20px">
-              <div id="dataCharts_visitor" ref="chart_data" style="height: 350px"/>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="14">
-          <el-card style="min-height: 393px">
-            <el-row>
-              <el-col :span="12">
-                <div class="end_title">留言</div>
-              </el-col>
-              <!--              <el-col :span="12">-->
-              <!--                <div style="float: right">-->
-              <!--                  <el-button style="padding-right: 0; color: #666" type="text" @click="$router.push({path:'/sf/lawer/LeaveMessage/index'})">查看更多-->
-              <!--                    <i class="el-icon-arrow-right" />-->
-              <!--                  </el-button>-->
-              <!--                </div>-->
-              <!--              </el-col>-->
-            </el-row>
-            <el-divider class="controlDivider"/>
-            <div class="end_table">
-              <el-table
-                class="table-list"
-                :data="tableList"
-              >
-                <el-table-column type="index" label="序号" width="55"/>
-                <el-table-column label="留言人" prop="userName"/>
-                <el-table-column label="标题" prop="leaveTitle"/>
-                <el-table-column label="留言时间" prop="leaveDate"/>
-                <el-table-column
-                  label="操作"
-                  width="150"
-                >
-                  <template slot-scope="scope">
-                    <el-button style="padding: 0!important;" type="text" size="small">查看</el-button>
-                    <el-button style="padding: 0!important;margin-left: 13px;" type="text" size="small">删除</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
-    </div>
   </div>
 </template>
 

src/views/equipment/equipmentCheck/index.vue

 <template>
-  <div>
-    设备库盘点记录
+  <div class="app-container">
+    <el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
+      <el-form-item label="pn" prop="pn">
+        <el-input
+          v-model="queryParams.pn"
+          placeholder="请输入pn"
+          clearable
+          :maxlength="30"
+          size="small"
+          style="width: 150px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="lot" prop="lot">
+        <el-input
+          v-model="queryParams.lot"
+          placeholder="请输入设备lot"
+          clearable
+          size="small"
+          style="width: 150px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="plocation" prop="plocation">
+        <el-input
+          v-model="queryParams.plocation"
+          placeholder="请输入plocation"
+          clearable
+          size="small"
+          style="width: 150px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" style="padding: 8px 7px;" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
+        <el-button style="padding: 8px 7px;" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+      </el-form-item>
+      <div style="float: right">
+
+        <el-form-item>
+          <el-button style="padding: 8px 7px;" :type="typePrimary" :size="smallSize" :icon="addIcon" @click="checkType">开始盘点  </el-button>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button style="padding: 8px 7px;" type="danger" :size="smallSize" icon="el-icon-minus" @click="deleteByType">结束盘点 </el-button>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button style="padding: 8px 7px;" :type="'warning'" :size="smallSize" icon="el-icon-view" @click="checkInventory">查看盘点  </el-button>
+        </el-form-item>
+
+      </div>
+    </el-form>
+    <div class="placeholder" />
+    <div style="padding:5px 10px">
+      <div class="mb12 font-small-bold">库存盘点列表</div>
+      <el-table v-loading="loading" border :data="equipmentList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="50px" />
+        <el-table-column type="index" label="序号" width="50px" />
+        <el-table-column label="pn" prop="pn">
+          <template slot-scope="scope">
+            {{ scope.row.pn || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="lot" prop="lot">
+          <template slot-scope="scope">
+            {{ scope.row.lot || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="plocation" prop="plocation">
+          <template slot-scope="scope">
+            {{ scope.row.plocation || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="厚度" prop="phd">
+          <template slot-scope="scope">
+            {{ scope.row.phd || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作员" prop="createName" width="70px">
+          <template slot-scope="scope">
+            {{ scope.row.createName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作时间" :show-overflow-tooltip="true" align="center" prop="updateDate" width="180px">
+          <template slot-scope="scope">
+            <span>{{ scope.row.updateDate | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" class-name="small-padding fixed-width" width="80px">
+          <template slot-scope="scope">
+            <el-button :type="typeParent" :size="size" @click="handleDetail(scope.row)">
+              详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.rows"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改设备配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="名称" prop="roleName">
+          <el-input v-model.trim="form.roleName" show-word-limit :maxlength="30" placeholder="请输入设备名称" />
+        </el-form-item>
+        <el-form-item label="设备来源" prop="roleKey">
+          <el-input v-model.trim="form.roleKey" show-word-limit :maxlength="30" placeholder="请输入设备来源" />
+        </el-form-item>
+        <el-form-item label="排序" prop="roleSort">
+          <el-input-number v-model="form.roleSort" style="width: 100%" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="设备批次">
+          <!--          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>-->
+          <!--          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>-->
+          <!--          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>-->
+          <el-tree
+            ref="menu"
+            class="tree-border"
+            :data="menuOptions"
+            show-checkbox
+            node-key="id"
+            check-strictly
+            empty-text="加载中，请稍后"
+            :props="defaultProps"
+            @check-change="handleMenuCheckChange"
+          />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input
+            v-model.trim="form.remark"
+            maxlength="200"
+            show-word-limit
+            type="textarea"
+            placeholder="请输入内容"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!-- 弹出框。。。。。。。。。。。。。。。。。。。。。。。 -->
+    <el-dialog class="aboutSingleDetails" :title="title" :visible.sync="openDetails" width="700px" append-to-body :close-on-click-modal="false">
+      <el-form ref="formDetails" :model="singleDetails" size="small" label-width="90px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="pn：" prop="pn">
+              <el-input v-model.trim="singleDetails.pn" :readonly="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="lot：" prop="workshop">
+              <el-input v-model.trim="singleDetails.lot" :readonly="true" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="plocation：" prop="plocation">
+              <el-input v-model.trim="singleDetails.plocation" :readonly="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="prank：" prop="prank">
+              <el-input v-model.trim="singleDetails.prank" :readonly="true" :maxlength="100" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="psm：" prop="psm">
+              <el-input v-model.trim="singleDetails.psm" :readonly="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="pzl：" prop="pzl">
+              <el-input v-model.trim="singleDetails.pzl" :readonly="true" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="厚度：" prop="phd">
+              <el-input v-model.trim="singleDetails.phd" :readonly="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" />
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="操作员：" prop="createName">
+              <el-input v-model.trim="singleDetails.createName" :readonly="true" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label=" 操作时间：" prop="updateDate">
+              <el-input v-model.trim="singleDetails.updateDate" :readonly="true" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      </el-form>
+    </el-dialog>
+    <el-dialog
+      title="库存盘点列表"
+      :visible.sync="table"
+      direction="rtl"
+      size="50%"
+      :close-on-click-modal="false"
+    >
+      <el-table v-loading="loading" border :data="tableList" style="padding: 0 10px;" @selection-change="handleSelectionChange">
+
+        <el-table-column type="index" label="序号" width="80" />
+
+        <el-table-column label="pn" prop="pn">
+          <template slot-scope="scope">
+            {{ scope.row.pn || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="lot" prop="lot">
+          <template slot-scope="scope">
+            {{ scope.row.lot || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="位置" prop="plocation">
+          <template slot-scope="scope">
+            {{ scope.row.plocation || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="厚度" prop="phd">
+          <template slot-scope="scope">
+            {{ scope.row.phd || '-' }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import {
+  addRole,
+  changeRoleStatus,
+  dataScope,
+  delRole,
+  exportRole,
+  getRole,
+  updateRole
+} from '@/api/system/role'
+import { checkType, listCheck, addList, deleteByType, checkInventory, ListAllWarehose } from '@/api/equipment/check'
+import { roleMenuTreeselect, roleMenuTreeselectMC, treeselect as menuTreeselect } from '@/api/system/menu'
+import { roleDeptTreeselect, treeselect as deptTreeselect } from '@/api/system/dept'
+// import { getRolesByInsId } from '../../../api/businessManage/template'
 export default {
-  name: 'Index'
+  name: 'Role',
+  data() {
+    return {
+      // 需要盘点的list
+      checkFrom: {
+        Ptype: '',
+        checkList: []
+      },
+      table: false,
+      tableList: [],
+      // 选中的列表
+      selectList: [],
+      // TODO: 表单里的单项详情参数
+      singleDetails: {
+        equipmentName: '',
+        equipmentCode: '',
+        lot: '',
+        location: '',
+        thickness: '',
+        createBy: '',
+        updateDate: ''
+      },
+      // 是否显示弹出层（数据详情）
+      openDetails: false,
+      // // TODO: 模拟测试数据
+
+      // check: '开始盘点',
+      typeParent: 'text',
+      typePrimary: 'primary',
+      typeSuccess: 'success',
+      nameParent: '删除',
+      resetName: '重置',
+      addName: '新增',
+      exportName: '导出',
+      updataName: '修改',
+      size: 'mini',
+      smallSize: 'small',
+      delicon: 'el-icon-delete',
+      addIcon: 'el-icon-plus',
+      exportIcon: 'el-icon-download',
+      resetIcon: '',
+      haspermi: ['sys:user:delete'],
+      resetHaspermi: ['sys:user:resetPwd'],
+      updateHaspermi: ['sys:role:update'],
+      addHaspermi: ['sys:role:add'],
+      exportHaspermi: ['sys:role:export'],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 总条数
+      total: 0,
+      // 角色表格数据
+      roleList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 是否显示弹出层（数据权限）
+      openDataScope: false,
+      // 日期范围
+      // dateRange: [],
+      // 菜单表格数据
+      menuList: [],
+      menuExpand: false,
+      menuNodeAll: false,
+      deptExpand: true,
+      deptNodeAll: false,
+      // 状态数据字典
+      statusOptions: [
+        {
+          dictLabel: '启用',
+          dictValue: '1'
+        },
+        {
+          dictLabel: '停用',
+          dictValue: '0'
+        }
+      ],
+      // 数据范围选项
+      dataScopeOptions: [
+        {
+          value: '1',
+          label: '全部数据权限'
+        },
+        {
+          value: '2',
+          label: '自定数据权限'
+        },
+        {
+          value: '3',
+          label: '本部门数据权限'
+        },
+        {
+          value: '4',
+          label: '本部门及以下数据权限'
+        },
+        {
+          value: '5',
+          label: '仅本人数据权限'
+        }
+      ],
+      equipmentList: [],
+      // 菜单列表
+      menuOptions: [],
+      // 部门列表
+      tOptions: [],
+      // 查询参数
+      queryParams: {
+        page: 1,
+        rows: 10,
+        ptype: 1,
+        pstatus: 0,
+        pn: '',
+        lot: '',
+        plocation: ''
+      },
+      // 表单参数
+      form: {
+
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 表单校验
+      rules: {
+        roleName: [
+          { required: true, message: '请输入角色名称', trigger: 'blur' }
+        ],
+        roleKey: [
+          { required: true, message: '请输入权限字符', trigger: 'blur' }
+        ],
+        roleSort: [
+          { required: true, message: '请输入角色排序', trigger: 'blur' }
+        ]
+      },
+      deptOptions: [],
+      formData: {}
+    }
+  },
+  /** 路由离开前存储筛选条件*/
+  beforeRouteLeave(to, from, next) {
+    this.$store.dispatch('searchSave/searchParamsSet', {
+      path: this.$route.path,
+      param: {
+        ...this.queryParams
+      }
+    })
+    next()
+  },
+  created() {
+    if (this.$store.getters.searchParams[this.$route.path]) {
+      const { searchParams } = this.$store.getters; const { path } = this.$route
+      const param = JSON.parse(searchParams[path]) // 保留着的查询条件
+      this.queryParams = { ...param }
+    }
+    this.getList()
+    // this.getDicts(dictCons['NORMAL_DISABLE']).then(response => {
+    //   this.statusOptions = response.data;
+    // });
+  },
+  methods: {
+    checkInventory() {
+      this.table = true
+      checkInventory(1)
+        .then(response => {
+          // 处理返回的数据
+          this.tableList = response.data
+          console.log(response)
+        })
+        .catch(error => {
+          // 处理请求错误
+          console.error(error)
+        })
+    },
+
+    // TODO: 获取所选行详情信息操作
+    handleDetail(row) {
+      this.singleDetails = this.formReset
+      this.singleDetails = row
+      this.title = '详情信息'
+      this.openDetails = !this.openDetails
+    },
+    deleteByType() {
+      // 添加二次确认对话框
+      this.$confirm('确认要结束盘点吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          // 用户点击确定按钮时执行的回调函数
+          deleteByType(1).then(flag => {
+            if (flag.data > 0 && flag.code === 200) {
+              this.$message.success('结束盘点成功')
+            } else {
+              this.$message.error('当前未开始盘点')
+            }
+          })
+        })
+        .catch(() => {
+          // 用户点击取消按钮时执行的回调函数，可以忽略这里的实现
+        })
+    },
+    checkType() {
+      checkType(1).then(total => {
+        if (total.data !== 0) {
+          this.$message.error('请先结束盘点')
+        } else {
+          let data = []
+          if (this.selectList.length === 0) {
+            ListAllWarehose(this.queryParams).then(res => {
+              if (res.code === 200) {
+                data = res.data
+              }
+            })
+          } else {
+            data = this.selectList
+          }
+          // 添加二次确认对话框
+          this.$confirm('确认要进行盘点吗？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          })
+            .then(() => {
+              // 用户点击确定按钮时执行的回调函数
+              addList(data).then(flag => {
+                if (flag.data.influence > 0) {
+                  this.$message.success('盘点成功')
+                } else {
+                  this.$message.error('盘点失败')
+                }
+              })
+            })
+            .catch(() => {
+              // 用户点击取消按钮时执行的回调函数，可以忽略这里的实现
+            })
+        }
+      })
+    },
+
+    handelTab(i, e) {
+      const that = this
+      if (!that.$refs['input' + i]) {
+        return
+      }
+      that.$nextTick(() => {
+        e.target.blur()
+        const index = i + 1
+        that.$refs['input' + index].focus()
+      })
+    },
+    /** 查询角色列表 */
+    getList() {
+      this.loading = true
+      listCheck().then(
+        response => {
+          console.log('response', response)
+          this.equipmentList = response.rows
+          // this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    /** 查询菜单树结构 */
+    getMenuTreeselect() {
+      menuTreeselect().then(response => {
+        this.menuOptions = response.data
+      })
+    },
+    /** 查询菜单列表 */
+    getMenuList(roleId) {
+      roleMenuTreeselectMC(roleId).then(response => {
+        this.menuList = this.handleTree(response.data.menus, 'businessId')
+        this.loading = false
+      })
+    },
+    /** 查询部门树结构 */
+    getDeptTreeselect() {
+      deptTreeselect().then(response => {
+        this.deptOptions = response.data
+      })
+    },
+    // 树状图节点点击选中事件
+    handleMenuCheckChange(data, check, subCheck) { // data为选中节点信息，check选中状态
+      if (data.children !== undefined && data.children !== null) { // 是否包含子节点
+        this.checkNode(data.children, check) // 调用checkNode方法
+      }
+      // // 获取所有被选中的节点信息
+      // const nodes = this.$refs.menu.getCheckedNodes(false, false)
+      // // 将获取到的信息赋值（根据自己的需求）
+      // this.custGroupDesc = nodes.map(item => item.CN_NAME)
+      // this.searchForm.custGroup = nodes.map(item => item.code)
+    },
+    // 选中所有下级节点
+    checkNode(data, check) {
+      // 遍历所有下级节点信息
+      data.forEach(item => {
+        // 通过节点信息设置选中状态
+        this.$refs.menu.setChecked(item, check, false)
+        // 是否包含下级节点，包含下级节点则选中所有下级节点
+        if (item.children !== undefined) {
+          this.checkNode(item.children, check)
+        }
+      })
+    },
+    // 所有菜单节点数据
+    getMenuAllCheckedKeys() {
+      // 目前被选中的菜单节点
+      const checkedKeys = this.$refs.menu.getHalfCheckedKeys()
+      // 半选中的菜单节点
+      const halfCheckedKeys = this.$refs.menu.getCheckedKeys()
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+      return checkedKeys
+    },
+    // 所有部门节点数据
+    getDeptAllCheckedKeys() {
+      // 目前被选中的部门节点
+      const checkedKeys = this.$refs.dept.getHalfCheckedKeys()
+      // // 半选中的部门节点
+      const halfCheckedKeys = this.$refs.dept.getCheckedKeys()
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+      return this.$refs.dept.getCheckedKeys()
+    },
+    /** 根据角色ID查询菜单树结构 */
+    getRoleMenuTreeselect(roleId) {
+      return roleMenuTreeselect(roleId).then(response => {
+        this.menuOptions = response.data.menus
+        return response
+      })
+    },
+    /** 根据角色ID和菜单ID查询部门树结构 */
+    getRoleDeptTreeselect(roleId, menuId) {
+      return roleDeptTreeselect(roleId, menuId).then(response => {
+        this.form.deptCheckStrictly = response.data.deptCheckStrictly
+        this.deptOptions = response.data.depts
+        this.form.dataScope = this.dataScopeOptions[response.data.dataScope - 1].value
+        return response
+      })
+    },
+    // 角色状态修改
+    handleStatusChange(row) {
+      const text = row.flag === '1' ? '启用' : '停用'
+      this.$confirm('是否确认操作?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return changeRoleStatus(row.businessId, row.flag)
+      }).then(() => {
+        this.$message({
+          message: text + '成功',
+          type: 'success'
+        })
+      }).catch(function() {
+        row.flag = row.flag === '0' ? '1' : '0'
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 取消按钮（数据权限）
+    cancelDataScope() {
+      this.openDataScope = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      if (this.$refs.menu !== undefined) {
+        this.$refs.menu.setCheckedKeys([])
+      }
+      this.menuExpand = false
+      this.menuNodeAll = false
+      this.deptExpand = true
+      this.deptNodeAll = false
+      this.form = {
+        roleId: undefined,
+        businessId: undefined,
+        roleName: undefined,
+        roleKey: undefined,
+        roleSort: 0,
+        flag: '1',
+        menuIds: [],
+        menuName: undefined,
+        deptIds: [],
+        menuCheckStrictly: false,
+        deptCheckStrictly: false,
+        remark: undefined
+      }
+      this.resetForm('form')
+    },
+    /** 查询按钮操作 */
+    handleQuery() {
+      this.queryParams.page = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        page: 1,
+        rows: 10,
+        ptype: 1,
+        pstatus: 0,
+        pn: '',
+        lot: '',
+        plocation: ''
+      }
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.roleId)
+      this.selectList = selection
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    // // 树权限（父子联动）
+    // handleCheckedTreeConnect(value, type) {
+    //   if (type === 'menu') {
+    //     this.form.menuCheckStrictly = !!value
+    //   } else if (type === 'dept') {
+    //     this.form.deptCheckStrictly = !!value
+    //   }
+    // },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value, type) {
+      if (type === 'menu') {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : [])
+      } else if (type === 'dept') {
+        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : [])
+      }
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      if (type === 'menu') {
+        const treeList = this.menuOptions
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
+        }
+      } else if (type === 'dept') {
+        const treeList = this.deptOptions
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
+        }
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.getMenuTreeselect()
+      this.open = true
+      this.title = '添加角色'
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const roleId = row.businessId || this.ids
+      const roleMenu = this.getRoleMenuTreeselect(roleId)
+      getRole(roleId).then(response => {
+        this.form = response.data
+        this.open = true
+        this.getMenuTreeselect(roleId)
+        this.$nextTick(() => {
+          roleMenu.then(res => {
+            this.$refs.menu.setCheckedKeys(res.data.checkedKeys)
+          })
+        })
+        this.title = '修改角色'
+      })
+    },
+    /** 分配数据权限操作 选择菜单 */
+    handleMenu(row) {
+      this.reset()
+      const roleId = row.businessId || this.ids
+      this.getMenuList(roleId) // 查询菜单列表树形显示
+      getRole(roleId).then(response => {
+        this.form = response.data
+        this.openDataScope = true
+        this.title = '分配数据权限'
+      })
+    },
+    /** 分配数据权限操作 */
+    handleDataScope(row) {
+      this.deptOptions = []
+      this.form.dataScope = undefined
+      const roleId = this.form.businessId
+      this.form.menuId = row.businessId
+      this.form.menuName = row.menuName
+      const roleDeptTreeselect = this.getRoleDeptTreeselect(roleId, this.form.menuId)
+      this.$nextTick(() => {
+        roleDeptTreeselect.then(res => {
+          this.$refs.dept.setCheckedKeys(res.data.checkedKeys)
+        })
+      })
+      this.title = '分配数据权限'
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.form.menuCheckStrictly = false
+          if (this.form.businessId !== undefined) {
+            this.form.menuIds = this.getMenuAllCheckedKeys()
+            updateRole(this.form).then(response => {
+              this.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
+          } else {
+            this.form.menuIds = this.getMenuAllCheckedKeys()
+            addRole(this.form).then(response => {
+              this.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 提交按钮（数据权限） */
+    submitDataScope: function() {
+      if (this.form.businessId !== undefined && this.form.menuId !== undefined) {
+        this.form.deptIds = this.getDeptAllCheckedKeys()
+        dataScope(this.form).then(response => {
+          this.msgSuccess('修改成功')
+          this.openDataScope = false
+          this.getList()
+        })
+      }
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const roleIds = row.businessId || this.ids
+      this.$confirm('是否确认操作？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return delRole(roleIds)
+      }).then(() => {
+        this.getList()
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+      }).catch(function() {
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams
+      this.$confirm('是否确认操作?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return exportRole(queryParams).then(response => {
+          const blob = new Blob([response])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob)// 创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = '角色信息' + '.xls' // 下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click()// 点击下载
+          document.body.removeChild(downloadElement)// 下载完成移除元素
+          window.URL.revokeObjectURL(href)// 释放掉blob对象
+          // this.download(response.msg);
+        })
+      })
+    }
+  }
 }
 </script>
+<style lang="scss" scoped>
+.aboutSingleDetails{
+  .el-form-item{
+    .el-input >>> .el-input__inner {
+      -webkit-appearance: none;
+      background-color: #FFF;
+      background-image: none;
+      border-radius: 4px;
+      border: 0;
+      width: 100%;
+    }
+  }
+}
+.app-container {
+  font-size: 18px;
+  padding: 0;
+
+  .placeholder {
+    height: 1.3vh;
+    background-color: #F4F4F4;
+    margin-bottom: 10px
+  }
 
-<style scoped>
+  .table-drop {
+    vertical-align: 2px;
+    line-height: 20px;
+    margin-left: 15px
+  }
 
+  .el-switch {
+    margin-left: 15px;
+  }
+}
+
+.el-divider--vertical {
+  height: 12em;
+  width: 4px;
+}
 </style>