123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- <template>
- <div class="main-contain">
- <div class="position">
- <bread-crumb :crumbs="crumbs"></bread-crumb>
-
- <el-button
- size="small"
- icon="el-icon-circle-plus-outline"
- type="primary"
- @click="addMode"
- >新增</el-button
- >
- </div>
- <div class="app-container">
- <el-row>
- <el-col :span="24">
- <el-table
- :data="tableData"
- :row-style="{ color: '#303133' }"
- :header-cell-style="{
- backgroundColor: 'rgb(245, 247, 250)',
- color: '#606266'
- }"
- border
- >
- <el-table-column label="型号名称" align="center">
- <template slot-scope="scope">
- <span>{{ scope.row.device_mode }}</span>
- </template>
- </el-table-column>
- <el-table-column label="操作" align="center">
- <template slot-scope="scope">
- <el-tooltip
- class="item"
- effect="dark"
- content="编辑"
- placement="top"
- >
- <el-button
- type="primary"
- icon="el-icon-edit-outline"
- size="small"
- @click="EditMode(scope.row.id)"
- ></el-button>
- </el-tooltip>
- <el-tooltip
- class="item"
- effect="dark"
- content="删除"
- placement="top"
- >
- <el-button
- type="danger"
- icon="el-icon-delete"
- size="small"
- @click="DeleteMode(scope.row.id, scope.$index)"
- ></el-button>
- </el-tooltip>
- </template>
- </el-table-column>
- </el-table>
- </el-col>
- </el-row>
-
- <el-dialog
- title="添加设备型号"
- :visible.sync="dialogVisible"
- width="30%"
- center
- >
- <el-form :model="form" ref="form" :rules="ModeRules">
- <el-form-item label="设备型号:" required prop="device_mode">
- <el-input style="width:200px" v-model="form.device_mode"></el-input>
- </el-form-item>
- </el-form>
- <span slot="footer" class="dialog-footer">
- <el-button @click="dialogVisible = false">取 消</el-button>
- <el-button type="primary" @click="SaveMode('form')">保存</el-button>
- </span>
- </el-dialog>
-
- <el-dialog
- title="编辑设备型号"
- :visible.sync="editDialogVisible"
- width="30%"
- center
- >
- <el-form :model="form" ref="form" :rules="ModeRules">
- <el-form-item label="设备型号:">
- <el-input style="width:200px" v-model="form.device_mode"></el-input>
- </el-form-item>
- </el-form>
- <span slot="footer" class="dialog-footer">
- <el-button @click="editDialogVisible = false">取 消</el-button>
- <el-button type="primary" @click="UpdateMode('form')">保存</el-button>
- </span>
- </el-dialog>
- </div>
- </div>
- </template>
-
- <script>
- // eslint-disable-next-line no-unused-vars
- import BreadCrumb from "@/xt_pages/components/bread-crumb";
- import {
- SaveMode,
- getAllMode,
- EditMode,
- UpdateMode,
- DeleteMode
- } from "@/api/manage";
- export default {
- name: "index.vue",
- data() {
- return {
- crumbs: [
- { path: false, name: "设备管理" },
- { path: "/device/mode", name: "型号管理" }
- ],
- dialogVisible: false,
- editDialogVisible: false,
- tableData: [],
- form: {
- id: "",
- device_mode: ""
- },
- ModeRules: {
- device_mode: [{ required: true, message: "请填写设备型号" }]
- }
- };
- },
- methods: {
- addMode() {
- this.dialogVisible = true;
- },
- SaveMode(formName) {
- this.$refs[formName].validate(valid => {
- if (valid) {
- // eslint-disable-next-line no-undef
- SaveMode(this.form).then(response => {
- // eslint-disable-next-line no-empty
- if (response.data.state === 1) {
- var mode = response.data.data.mode;
- this.form.device_mode = "";
- this.dialogVisible = false;
- this.getAllMode();
- }
- });
- }
- });
- },
- getAllMode() {
- getAllMode().then(response => {
- if (response.data.state === 1) {
- var mode = response.data.data.mode;
- this.tableData = mode;
- console.log(mode);
- }
- });
- },
- EditMode(id) {
- this.editDialogVisible = true;
- EditMode(id).then(response => {
- if (response.data.state === 1) {
- var mode = response.data.data.mode;
- this.form.id = mode.id;
- this.form.device_mode = mode.device_mode;
- }
- });
- },
- UpdateMode(formName) {
- this.$refs[formName].validate(valid => {
- if (valid) {
- UpdateMode(this.form.id, this.form).then(response => {
- if (response.data.state === 1) {
- var mode = response.data.data.mode;
- this.editDialogVisible = false;
- this.getAllMode();
- }
- });
- }
- });
- },
- DeleteMode(id, index) {
- this.$confirm(
- "确认要删除所选信息吗? <br>删除后,信息将无法恢复",
- "删除提示",
- {
- dangerouslyUseHTMLString: true,
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }
- ).then(() => {
- DeleteMode(id, index).then(response => {
- if (response.data.state === 1) {
- // eslint-disable-next-line no-unused-vars
- var msg = response.data.data.msg;
- this.tableData.splice(index, 1);
- } else {
- this.$message.error("该型号已绑定设备,不能删除");
- }
- });
- });
- }
- },
-
- created() {
- this.getAllMode();
- }
- };
- </script>
-
- <style scoped></style>
|