1.设备管理、设备类型(查询、新增、删除)功能开发 2.设备管理、设备组(查询、新增、删除)功能开发

loulijun2021

2022-06-23 c89113ec9b5032b5553334ec6c9ac3700ba6c398

1.设备管理、设备类型(查询、新增、删除)功能开发 2.设备管理、设备组(查询、新增、删除)功能开发

 src/views/jcsz/jsqd.vue

@@ -12,13 +12,13 @@
        >
          <div class="elForm">
            <el-form-item label="角色编码" style=" display: flex;">
              <el-input v-model="form.RoleCode" placeholder="请输入" style="width: calc(100%-30px)" />
              <el-input v-model="form.RoleCode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="角色名称" style=" display: flex;">
              <el-input v-model="form.RoleName" placeholder="请输入" style="width: calc(100%-30px)" />
              <el-input v-model="form.RoleName" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="角色类型" style=" display: flex;">
              <el-select v-model="form.RoleTypeCode" filterable style="width: calc(100%-30px)" placeholder="请选择">
              <el-select v-model="form.RoleTypeCode" filterable style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in RoleTypeCodeArr2"
                  :key="item.roletype_code"
@@ -28,7 +28,7 @@
              </el-select>
            </el-form-item>
            <el-form-item label="创建人员" style=" display: flex;">
              <el-input v-model="form.UserName" style="width: calc(100%-30px)" placeholder="请输入" />
              <el-input v-model="form.UserName" style="width: 200px" placeholder="请输入" />
            </el-form-item>
          </div>
          <div style="display: flex;align-items: start;margin-top: 5px;">
@@ -47,6 +47,7 @@
        <el-table
          :data="tableData"
          border
          stripe
          :style="{width: 100+'%',height:tableHeight+'px'}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
@@ -212,7 +213,7 @@
        <el-table-column
          width="50"
          label="序号"
          type="index"
          prop="RowNum"
        />
        <el-table-column
          prop="roletype_code"
@@ -789,6 +790,7 @@
          this.RoleTypeCodeArr.splice(index, 1)
        }
      })
      this.getRoleTypeSearch2()
    },
    // 设置对话框取消事件
    settingDialogVisibleCancel() {
@@ -840,7 +842,7 @@
    // 设置表单取消事件
    formSettingCancel(row) {
      this.RoleTypeCodeArr.forEach((item, index) => {
        if (item.isVisible === 1) {
        if (item.isVisible === 1 && item.roletype_code === row.roletype_code) {
          this.RoleTypeCodeArr.splice(index, 1)
        }
      })
@@ -1475,7 +1477,7 @@
.elForm {
  display: flex;
  justify-content: flex-start;
  width: 85%;
  width: 100%;
  flex-wrap: wrap;
}
</style>

 src/views/jcsz/wldw.vue

@@ -11,13 +11,13 @@
        >
          <div class="elForm">
            <el-form-item label="单位编码" style=" display: flex;">
              <el-input v-model="form.CuntUnitCode" placeholder="请输入" style="width: calc(100%-30px)" />
              <el-input v-model="form.CuntUnitCode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="单位名称" style=" display: flex;">
              <el-input v-model="form.CuntUnitName" placeholder="请输入" style="width: calc(100%-30px)" />
              <el-input v-model="form.CuntUnitName" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="单位属性" style=" display: flex;">
              <el-select v-model="form.UnitAttr" filterable style="width: calc(100%-30px)" placeholder="请选择">
              <el-select v-model="form.UnitAttr" filterable style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in UnitAttrArr"
                  :key="item.value"
@@ -27,7 +27,7 @@
              </el-select>
            </el-form-item>
            <el-form-item label="创建人员" style=" display: flex;">
              <el-input v-model="form.CreateUser" style="width: calc(100%-30px)" placeholder="请输入" />
              <el-input v-model="form.CreateUser" style="width: 200px" placeholder="请输入" />
            </el-form-item>
          </div>
          <div style="display: flex;align-items: start;margin-top: 5px;z-index: 2">
@@ -45,6 +45,7 @@
        <el-table
          :data="tableData"
          border
          stripe
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
          :cell-style="this.$cellStyle"
@@ -581,7 +582,7 @@
.elForm {
  display: flex;
  justify-content: flex-start;
  width: 85%;
  width: 100%;
  flex-wrap: wrap;
}
</style>

 src/views/jcsz/yhqd.vue

@@ -12,10 +12,10 @@
        >
          <div class="elForm">
            <el-form-item label="用户编码" style=" display: flex;">
              <el-input v-model="form.UserCode" placeholder="请输入" style="width: calc(100%-30px)" />
              <el-input v-model="form.UserCode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="用户名称" style=" display: flex;">
              <el-input v-model="form.UserName" placeholder="请输入" style="width: calc(100%-30px)" />
              <el-input v-model="form.UserName" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="所属组织" style=" display: flex;">
              <el-cascader
@@ -27,7 +27,7 @@
              />
            </el-form-item>
            <el-form-item label="工资类型" style=" display: flex;">
              <el-select v-model="form.wagetype" filterable style="width: calc(100%-30px)" placeholder="请选择">
              <el-select v-model="form.wagetype" filterable style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in wagetypeArr"
                  :key="item.value"
@@ -37,7 +37,7 @@
              </el-select>
            </el-form-item>
            <el-form-item label="在职状态" style=" display: flex;">
              <el-select v-model="form.Enable" filterable style="width: calc(100%-30px)" placeholder="请选择">
              <el-select v-model="form.Enable" filterable style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in EnableArr"
                  :key="item.value"
@@ -61,6 +61,7 @@
        <el-table
          :data="tableData"
          border
          stripe
          highlight-current-row
          :style="{width: 100+'%',height:tableHeight+'px'}"
          :header-cell-style="this.$headerCellStyle"
@@ -1067,7 +1068,7 @@
.elForm {
  display: flex;
  justify-content: flex-start;
  width: 85%;
  width: 100%;
  flex-wrap: wrap;
}
</style>

 src/views/jcsz/zzjg.vue

@@ -12,13 +12,13 @@
        >
          <div class="elForm">
            <el-form-item label="组织编码" style=" display: flex;">
              <el-input v-model="form.OrgCode" placeholder="请输入" style="width: calc(100%-30px)" />
              <el-input v-model="form.OrgCode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="组织名称" style=" display: flex;">
              <el-input v-model="form.OrgName" placeholder="请输入" style="width: calc(100%-30px)" />
              <el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="组织类型" style=" display: flex;">
              <el-select v-model="form.OrgType" filterable style="width: calc(100%-30px)" placeholder="请选择">
              <el-select v-model="form.OrgType" filterable style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in OrgTypeArr"
                  :key="item.value"
@@ -28,7 +28,7 @@
              </el-select>
            </el-form-item>
            <el-form-item label="创建人员" style=" display: flex;">
              <el-input v-model="form.UserName" style="width: calc(100%-30px)" placeholder="请输入" />
              <el-input v-model="form.UserName" style="width: 200px" placeholder="请输入" />
            </el-form-item>
          </div>
          <div style="display: flex;align-items: start;margin-top: 5px;">
@@ -47,6 +47,7 @@
        <el-table
          :data="tableData"
          border
          stripe
          :style="{width: 100+'%',height:tableHeight+'px'}"
          highlight-current-row
          :header-cell-style="this.$headerCellStyle"
@@ -139,6 +140,7 @@
        <el-form-item label="组织类型" prop="OrgType">
          <el-radio-group
            v-model="dialogForm.OrgType"
            style="display: flex; align-items: center; height: 40px;"
            @change="changeRadio"
          >
            <el-radio
@@ -502,7 +504,7 @@
.elForm {
  display: flex;
  justify-content: flex-start;
  width: 85%;
  width: 100%;
  flex-wrap: wrap;
}
</style>

 src/views/sbgl/sbqd.vue

@@ -9,15 +9,15 @@
          inline
          style="display: flex;justify-content: space-between"
        >
          <div class="elForm" style="width:100%">
          <div class="elForm">
            <el-form-item label="设备编码" style=" display: flex;">
              <el-input v-model="form.DeviceCode" placeholder="请输入" style="width: calc(100%-30px)" />
              <el-input v-model="form.DeviceCode" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="设备名称" style=" display: flex;">
              <el-input v-model="form.DeviceName" placeholder="请输入" style="width: calc(100%-30px)" />
              <el-input v-model="form.DeviceName" placeholder="请输入" style="width: 200px" />
            </el-form-item>
            <el-form-item label="使用状态" style=" display: flex;">
              <el-select v-model="form.Status" filterable style="width: calc(100%-30px)" placeholder="请选择">
              <el-select v-model="form.Status" filterable style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in StatusArr"
                  :key="item.value"
@@ -27,7 +27,7 @@
              </el-select>
            </el-form-item>
            <el-form-item label="所属车间" style=" display: flex;">
              <el-select v-model="form.WorkShop" filterable style="width: calc(100%-30px)" placeholder="请选择">
              <el-select v-model="form.WorkShop" filterable style="width: 200px" placeholder="请选择">
                <el-option
                  v-for="item in WorkShopArr"
                  :key="item.code"
@@ -37,7 +37,7 @@
              </el-select>
            </el-form-item>
            <el-form-item filterable label="设备类型" style="display: flex;">
              <el-select v-model="form.DeviceType" style="width: calc(100%-30px)" placeholder="请选择" @change="deviceTypeChange">
              <el-select v-model="form.DeviceType" style="width: 200px" placeholder="请选择" @change="deviceTypeChange">
                <el-option
                  v-for="item in DeviceTypeArr"
                  :key="item.code"
@@ -47,7 +47,12 @@
              </el-select>
            </el-form-item>
            <el-form-item label="设备组" style=" display: flex;">
              <el-select v-model="form.DeviceGroup" :disabled="form.DeviceType===''" style="width: calc(100%-30px)" placeholder="请选择">
              <el-select
                v-model="form.DeviceGroup"
                :disabled="form.DeviceType===''"
                style="width: 200px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in DeviceGroupArr"
                  :key="item.code"
@@ -74,6 +79,7 @@
        <el-table
          :data="tableData"
          border
          stripe
          highlight-current-row
          :style="{width: 100+'%',height:tableHeight+'px'}"
          :header-cell-style="this.$headerCellStyle"
@@ -246,7 +252,7 @@

    <!--设备类型-->
    <el-dialog
      title="角色类型"
      title="设备类型"
      :visible.sync="DeviceTypeDialogVisible"
      width="50%"
      top="15vh"
@@ -310,12 +316,6 @@
              <el-button v-if="row.isVisible===1" type="text" @click="DeviceTypeCancel(row)">取消</el-button>
            </div>
          </template>
          <!--          <template v-for="item in RoleTypeCodeArr" slot-scope="{row}">-->
          <!--            <div :key="item.roletype_code" class="operationClass">-->
          <!--              <el-button v-if="item.isVisible" type="text" @click="formSettingSave(row)">保存</el-button>-->
          <!--              <el-button v-if="item.isVisible" type="text" @click="formSettingCancel(row)">取消</el-button>-->
          <!--            </div>-->
          <!--          </template>-->
        </el-table-column>
      </el-table>
      <!--分页-->
@@ -338,16 +338,127 @@
    </el-dialog>

    <!--设备组-->
    <el-dialog
      title="设备组"
      :visible.sync="DeviceGroupDialogVisible"
      width="70%"
      top="15vh"
      class="DeviceTypeDialogVisible"
      @close="handleCloseDeviceGroup"
    >
      <div style="margin-bottom: 20px;display: flex">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addDeviceGroup">新增</el-button>
      </div>
      <el-table
        :data="DeviceGroupArray"
        border
        highlight-current-row
        :style="{width: 100+'%',height:tableHeight-300+'px'}"
        :header-cell-style="this.$headerCellStyle"
        :cell-style="this.$cellStyle"
        @sort-change="sortChangeOfDeviceGroup"
      >
        <el-table-column
          width="50"
          label="序号"
          prop="RowNum"
        />
        <el-table-column
          prop="code"
          label="分组编码"
          sortable="custom"
        >
          <template slot-scope="{row}">
            <el-input v-if="row.isVisible===1" v-model="row.code" placeholder="请输入" />
            <div v-else> {{ row.code }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="分组名称"
          sortable="custom"
        >
          <template slot-scope="{row}">
            <el-input v-if="row.isVisible===1" v-model="row.name" placeholder="请输入" />
            <div v-else> {{ row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="eqptype_name"
          label="所属设备类型"
          sortable="custom"
        >
          <template slot-scope="{row}">
            <!--            <el-input v-if="row.isVisible===1" v-model="row.eqptype_code" placeholder="请输入" />-->
            <el-select v-if="row.isVisible===1" v-model="row.eqptype_code" placeholder="请选择">
              <el-option
                v-for="item in DeviceTypeArr"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
            <div v-else> {{ row.eqptype_name }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="分组描述"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="{row}">
            <el-input v-if="row.isVisible===1" v-model="row.remark" placeholder="请输入" />
            <div v-else> {{ row.remark }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <div class="operationClass">
              <el-button v-if="row.isVisible===0" type="text" @click="DeviceGroupDel(row)">删除</el-button>
              <el-button v-if="row.isVisible===1" type="text" @click="DeviceGroupSave(row)">保存</el-button>
              <el-button v-if="row.isVisible===1" type="text" @click="DeviceGroupCancel(row)">取消</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <pagination
        v-show="DeviceGroupTotal>0"
        :total="DeviceGroupTotal"
        :page.sync="formDeviceGroup.page"
        :limit.sync="formDeviceGroup.rows"
        align="right"
        layout="prev, pager, next,sizes"
        popper-class="select_bottom"
        @pagination="getDeviceGroupSearchDialog"
      />
      <span slot="footer" class="dialog-footer">
        <div class="footerButton">
          <el-button @click="DeviceGroupDialogVisibleCancel">返回</el-button>
          <!--          <el-button type="primary" @click="settingDialogVisibleConfirm">确 定</el-button>-->
        </div>
      </span>
    </el-dialog>

    <!--导入-->

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { AddUpdateOrganization, DeleteOrganization, OrganizationSearch, PrentOrganization } from '@/api/jcsz'
import {
  AddUpdateOrganization,
  DeleteOrganization,
  OrganizationSearch,
  PrentOrganization,
  RoleTypeDelete
} from '@/api/jcsz'
import { getCookie } from '@/utils/auth'
import {
  AddUpdateDeviceGroup,
  AddUpdateDeviceType, DeleteDeviceType,
  DeviceGroupSearch,
  DeviceMangerSearch,
  DeviceTypeSearch,
@@ -430,17 +541,21 @@
      DeviceTypeDialogVisible: false,
      DeviceTypeArray: [], // 设备类型对话框内的数组
      formDeviceType: {
        // code: '',
        // name: '',
        // group: '',
        // description: '',
        rows: 1,
        row: 10,
        page: 1,
        rows: 10,
        prop: 'code',
        order: 'desc'
      },
      DeviceTypeTotal: 0

      DeviceTypeTotal: 0,
      DeviceGroupDialogVisible: false,
      DeviceGroupArray: [], // 设备组对话框内的数组
      formDeviceGroup: {
        page: 1,
        rows: 10,
        prop: 'code',
        order: 'desc'
      },
      DeviceGroupTotal: 0
    }
  },
  created() {
@@ -463,7 +578,7 @@
      this.total = res.count
    },
    // 获取所属车间下拉
    async  getWorkShopSelect() {
    async getWorkShopSelect() {
      const { data: res } = await WorkShopSelect()
      this.WorkShopArr = res
    },
@@ -473,7 +588,7 @@
      this.DeviceTypeArr = res
    },
    // 设备类型改变时
    async  deviceTypeChange(val) {
    async deviceTypeChange(val) {
      this.form.DeviceType = val
      const { data: res } = await DeviceTypeSelectGroup({ eqptypecode: val })
      this.DeviceGroupArr = res
@@ -603,7 +718,12 @@
    },
    // 处理对话框关闭
    handleCloseDeviceType() {
      // this.DeviceTypeDialogVisible = false
      this.DeviceTypeArray.forEach((item, index) => {
        if (item.isVisible === 1) {
          this.DeviceTypeArray.splice(index, 1)
        }
      })
      this.getDeviceTypeSelect()
    },
    // 设备类型表单点击排序
    sortChangeOfDeviceType({ column, prop, order }) {
@@ -620,19 +740,55 @@
    },
    // 新增按钮
    addDeviceType() {
      this.DeviceTypeArray.unshift({ code: '', name: '', group: '', description: '', isVisible: 1 })
      this.DeviceTypeArray.unshift({ code: '', name: '', group: '', remark: '', isVisible: 1 })
    },
    // 删除
    DeviceTypeDel(row) {

      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteDeviceType({ devicetypecode: row.code }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            this.getDeviceTypeSearchDialog()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 保存
    DeviceTypeSave(row) {

    async DeviceTypeSave(row) {
      if (row.code.trim().length < 1) {
        return this.$message.info('类型编码不能为空！')
      }
      if (row.name.trim().length < 1) {
        return this.$message.info('类型名称不能为空！')
      }
      if (row.remark.trim().length < 1) {
        return this.$message.info('类型描述不能为空！')
      }
      const data = {
        'code': row.code,
        'name': row.name,
        'group': '',
        'description': row.remark
      }
      const res = await AddUpdateDeviceType([data])
      if (res.code === '200') {
        this.$message.success('添加成功！')
        await this.getDeviceTypeSearchDialog()
      }
    },
    // 取消
    DeviceTypeCancel(row) {

      this.DeviceTypeArray.forEach((item, index) => {
        if (item.isVisible === 1 && item.code === row.code) {
          this.DeviceTypeArray.splice(index, 1)
        }
      })
    },
    // 返回按钮
    DeviceTypeDialogVisibleCancel() {
@@ -642,7 +798,101 @@
    /* 设备组模块*/
    // 点击设备组按钮
    deviceGroupButton() {

      this.DeviceGroupDialogVisible = true
      this.getDeviceGroupSearchDialog()
    },
    // 设备组对话框关闭事件
    handleCloseDeviceGroup() {
      this.DeviceGroupDialogVisible = false
      this.DeviceGroupArray.forEach((item, index) => {
        if (item.isVisible === 1) {
          this.DeviceGroupArray.splice(index, 1)
        }
      })
      if (this.form.DeviceType !== '') {
        this.deviceTypeChange(this.form.DeviceType)
      }
    },
    // 新增
    addDeviceGroup() {
      this.DeviceGroupArray.unshift({ code: '', name: '', eqptype_code: '', eqptype_name: '', remark: '', isVisible: 1 })
    },
    // 排序
    sortChangeOfDeviceGroup({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.formDeviceGroup.order = order
      this.formDeviceGroup.prop = prop
      this.getDeviceGroupSearchDialog()
    },
    // 获取设备组列表
    async getDeviceGroupSearchDialog() {
      const res = await DeviceGroupSearch(this.formDeviceGroup)
      this.DeviceGroupArray = res.data
      this.DeviceGroupTotal = res.count
      this.DeviceGroupArray.forEach(item => {
        item.isVisible = 0
      })
    },
    // 返回按钮
    DeviceGroupDialogVisibleCancel() {
      this.DeviceGroupDialogVisible = false
    },
    // 删除按钮
    DeviceGroupDel(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteDeviceGroup({ devicegroupcode: row.code }).then(res => {
          if (res.code === '200') {
            this.$message.success('删除成功!')
            this.getDeviceGroupSearchDialog()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 保存按钮
    async DeviceGroupSave(row) {
      if (row.code.trim().length < 1) {
        return this.$message.info('分组编码不能为空！')
      }
      if (row.name.trim().length < 1) {
        return this.$message.info('分组名称不能为空！')
      }
      if (row.eqptype_code.trim().length < 1) {
        return this.$message.info('所属设备类型不能为空！')
      }
      if (row.remark.trim().length < 1) {
        return this.$message.info('分组描述不能为空！')
      }
      const data = {
        'code': row.code,
        'name': row.name,
        'group': row.eqptype_code,
        'description': row.remark
      }
      const res = await AddUpdateDeviceGroup([data])
      if (res.code === '200') {
        this.$message.success('添加成功！')
        await this.getDeviceGroupSearchDialog()
      }
    },
    // 取消按钮
    DeviceGroupCancel(row) {
      this.DeviceGroupArray.forEach((item, index) => {
        if (item.isVisible === 1 && item.code === row.code) {
          this.DeviceGroupArray.splice(index, 1)
        }
      })
    }
  }
}
@@ -701,6 +951,12 @@
  ::v-deep .el-dialog__body {
    padding: 20px 20px !important;
  }

  ::v-deep .el-select .el-input .el-select__caret {
    display: flex;
    align-items: center;
  }

}

::v-deep .el-radio__input.is-checked .el-radio__inner {
@@ -780,10 +1036,11 @@
::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
  margin: 10px 30px 0px 0;
}

.elForm {
  display: flex;
  justify-content: flex-start;
  width: 85%;
  width: 100%;
  flex-wrap: wrap;
}
</style>