车间定义完工

ZR.Vue/src/api/basisManagement/workshop.js

@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+import { downFile } from '@/utils/request'
+
+export function getWorkshopList(query) {
+  return request({
+    url: '/mes/md/workshop/list',
+    method: 'get',
+    params: query,
+  })
+}
+
+export function insertworkshop(data) {
+  return request({
+    url: '/mes/md/workshop/addWorkshop',
+    method: 'post',
+    data: data,
+    contextType:"application/json"
+  })
+}
+
+
+export function updateWorkshop(data) {
+  return request({
+    url: '/mes/md/workshop/updateWorkshop',
+    method: 'post',
+    data: data,
+    contextType:"application/json"
+  })
+}
+
+
+export function delWorkshop(data) {
+  return request({
+    url: '/mes/md/workshop/delWorkshop',
+    method: 'post',
+    data: data,
+    contextType:"application/json"
+  })
+}

ZR.Vue/src/main.js

@@ -35,6 +35,11 @@ import UploadFile from '@/components/FileUpload/index';
 // 字典数据组件
 import DictData from '@/components/DictData'
 
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+
+
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -73,6 +78,7 @@ Vue.use(plugins)
 Vue.use(Element, {
   size: Cookies.get('size') || 'small' // set element-ui default size
 })
+Vue.use(VXETable)
 
 
 

ZR.Vue/src/views/basisManagement/workshop.vue

@@ -1,17 +1,282 @@
 <template>
-  <div>
+  <div class="app-container">
     <!-- 搜索部分 -->
     <div>
-
+      <el-form :model="search" inline v-show="search.showSearch">
+        <el-form-item label="车间编码 ">
+          <el-input v-model="search.workshopId" placeholder="输入车间名称"></el-input>
+        </el-form-item>
+        <el-form-item label="车间名称 ">
+          <el-input v-model="search.workshopName" placeholder="输入车间名称"></el-input>
+        </el-form-item>
+        <el-form-item label="车间位置 ">
+          <el-input v-model="search.workshopPosition" placeholder="输入车间名称"></el-input>
+        </el-form-item>
+        <el-button icon="el-icon-search" circle @click="getList"></el-button>
+      </el-form>
+    </div>
+    <!-- 按钮排 -->
+    <div>
+      <el-row :gutter="2">
+        <el-col :span="1.5">
+          <el-button type="primary" size="small" @click="addItem">增加</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="warning" size="small" @click="updataItem(true)" :disabled="updateDisable">修改</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="danger" size="small" @click="deleteItem(true)" :disabled="delDisable">删除</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="search.showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+      <el-row>
+        <pagination
+          :v-show="true"
+          :total="pagination.total"
+          :page.sync="pagination.pageNum"
+          :limit.sync="pagination.pageSize"
+          @pagination="getList"
+        />
+      </el-row>
+    </div>
+    <div>
+      <vxe-table
+        border
+        ref="xTable1"
+        :data="table.workshopList"
+        :loading="table.loading"
+        @checkbox-change="selectChangeEvent"
+        :row-config="{ isHover: true }"
+      >
+        <vxe-column type="checkbox" width="60"></vxe-column>
+        <vxe-column field="workshopId" title="车间编码" sortable></vxe-column>
+        <vxe-column field="workshopName" title="车间名称" sortable></vxe-column>
+        <vxe-column field="workshopPosition" title="车间位置" sortable></vxe-column>
+        <vxe-column title="操作" show-overflow>
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" icon="el-icon-edit" @click="updataItem(false, scope.row)">修改</el-button>
+            <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteItem(false, scope.row)" class="delred">删除</el-button>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <vxe-pager
+        background
+        :current-page.sync="pagination.pageNum"
+        :page-size.sync="pagination.pageSize"
+        :total="pagination.total"
+        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
+        @page-change="getList"
+      >
+      </vxe-pager>
     </div>
 
+    <!-- 弹窗-- 修改和删除 -->
+    <el-dialog :title="DMLdialog.title" :visible.sync="DMLdialog.visiable" width="600px" append-to-body>
+      <el-form ref="DMLdialog" :model="DMLdialog.form" label-width="150px" label-position="left" :rules="DMLdialog.rules">
+        <el-form-item label="车间编码 " prop="workshopId">
+          <el-input v-model="DMLdialog.form.workshopId" placeholder="输入车间名称"></el-input>
+        </el-form-item>
+        <el-form-item label="车间名称 " prop="workshopName">
+          <el-input v-model="DMLdialog.form.workshopName" placeholder="输入车间名称"></el-input>
+        </el-form-item>
+        <el-form-item label="车间位置 " prop="workshopPosition">
+          <el-input v-model="DMLdialog.form.workshopPosition" placeholder="输入车间名称"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { getWorkshopList, insertworkshop, updateWorkshop, delWorkshop } from '@/api/basisManagement/workshop.js'
 export default {
-    name: "workshop"
+  name: 'workshop',
+  data() {
+    return {
+      //搜索框配置
+      search: {
+        workshopId: '',
+        workshopName: '',
+        workshopPosition: '',
+        showSearch: true,
+      },
+      //表格
+      table: {
+        loading: true,
+        workshopList: [],
+      },
+      //分页
+      pagination: {
+        total: 0,
+        pageNum: 1,
+        pageSize: 10,
+      },
+      //新增修改数据项配置
+      DMLdialog: {
+        title: '',
+        visiable: false,
+        form: {
+          workshopId: '',
+          workshopName: '',
+          workshopPosition: '',
+        },
+        rules: {
+          workshopId: [{ required: true, message: '车间编码不能为空', trigger: 'blur' }],
+          workshopName: [{ required: true, message: '车间名称不能为空', trigger: 'blur' }],
+          workshopPosition: [{ required: true, message: '车间位置不能为空', trigger: 'blur' }],
+        },
+      },
+      //修改按钮
+      updateDisable: true,
+      //删除按钮
+      delDisable: true,
+      flag: 'update', //区分修改和删除
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    //获取表格数据
+    getList() {
+      const query = { ...this.search, ...this.pagination }
+      delete query.showSearch
+      getWorkshopList(query).then((res) => {
+        if (res.code == 200) {
+          this.table.loading = false
+          this.pagination.total = res.data.item1
+          this.table.workshopList = res.data.item2
+        }
+      })
+    },
+
+    //行更新
+    handleUpdate(row) {},
+    //行删除
+    handleDelete(row) {},
+    selectChangeEvent({ checked }) {
+      const records = this.$refs.xTable1.getCheckboxRecords()
+      if (records.length == 1) {
+        this.updateDisable = false
+      } else {
+        this.updateDisable = true
+      }
+      if (records.length > 0) {
+        this.delDisable = false
+      } else {
+        this.delDisable = true
+      }
+    },
+    //新增按钮
+    addItem() {
+      this.DMLdialog.title = '新增'
+      this.DMLdialog.visiable = true
+      this.flag = 'add'
+    },
+    //新增确认
+    submitForm() {
+      if (this.flag == 'update') {
+        updateWorkshop(this.DMLdialog.form).then((res) => {
+          if (res.code == 200 && res.data == 1) {
+            this.$notify.success('修改成功')
+            this.getList()
+            this.DMLdialog.visiable = false
+            this.reset()
+          }
+        })
+      } else if (this.flag == 'add') {
+        this.$refs['DMLdialog'].validate((valid) => {
+          if (valid) {
+            insertworkshop(this.DMLdialog.form).then((res) => {
+              if (res.code == 200) {
+                this.getList()
+                this.DMLdialog.visiable = false
+                this.reset()
+              }
+            })
+          }
+        })
+      }
+    },
+    cancel() {
+      this.DMLdialog.visiable = false
+      this.reset()
+    },
+    reset() {
+      this.DMLdialog.form = {
+        workshopId: '',
+        workshopName: '',
+        workshopPosition: '',
+      }
+      this.DMLdialog.form.reset()
+    },
+    //修改事件
+    updataItem(flag, row) {
+      debugger
+      this.DMLdialog.title = '修改'
+      this.DMLdialog.visiable = true
+      this.flag = 'update'
+      if (!flag) {
+        this.DMLdialog.form.workshopId = row.workshopId
+        this.DMLdialog.form.workshopName = row.workshopName
+        this.DMLdialog.form.workshopPosition = row.workshopPosition
+        this.DMLdialog.form.id = row.id
+      } else {
+        const records = this.$refs.xTable1.getCheckboxRecords()
+        if (records.length == 1) {
+          this.DMLdialog.form.workshopId = records[0].workshopId
+          this.DMLdialog.form.workshopName = records[0].workshopName
+          this.DMLdialog.form.workshopPosition = records[0].workshopPosition
+          this.DMLdialog.form.id = records[0].id
+        }
+      }
+    },
+    //删除事件
+    deleteItem(flag, row) {
+      if (!flag) {
+        this.$modal
+          .confirm('是否确认删除车间名称为"' + row.workshopName + '"的数据项？')
+          .then(function () {
+            const array = []
+            array.push(row.id)
+            return delWorkshop(array)
+          })
+          .then(() => {
+            this.getList()
+            this.$modal.msgSuccess('删除成功')
+          })
+          .catch(() => {})
+      } else {
+        const records = this.$refs.xTable1.getCheckboxRecords()
+        if (records.length > 0) {
+          this.$modal
+            .confirm('是否确认删除车间名称为"' + records.map((it) => it.workshopName) + '"的数据项？')
+            .then(function () {
+              return delWorkshop(records.map((it) => it.id))
+            })
+            .then(() => {
+              this.getList()
+              this.$modal.msgSuccess('删除成功')
+            })
+            .catch(() => {})
+        }
+      }
+    },
+  },
 }
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.delred {
+  ::v-deep .el-icon-delete {
+    color: #f56c6c;
+  }
+  ::v-deep span {
+    color: #f56c6c;
+  }
+}
+</style>