用户管理静态排版

src/views/systemManage/userManage/checkVideo.vue

@@ -0,0 +1,243 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+      class="dialog-component"
+      v-model="showDialog"
+      width="800px"
+      @close="closeDialog(0)"
+    >
+      <el-form
+        ref="formInfo"
+        class="demo-form-inline alarmStatusDialog"
+        label-width="130px"
+  
+      >
+        <div class="topInfo underline">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="户号：">2021-09-14 14:53:28</el-form-item>
+              <el-form-item label="站点名称：">测试222</el-form-item>
+              <el-form-item label="监察：">张三</el-form-item>
+              <el-form-item label="电试报告时间：">
+                <div>2021-09-14</div>
+                <div>距离电试超期还有 730 天</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <div class="grid-content">
+                <el-form-item label="流变变比：">11111</el-form-item>
+                <el-form-item label="单路电源容量：">11</el-form-item>
+                <el-form-item label="线路：">育11彭伟万众实业</el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="basicTit">现场问题：</div>
+            <el-form-item label="电缆空洞：">
+              <el-radio v-model="radio1" label="1">备选项</el-radio>
+              <div><img src="@/assets/images/archiveImg.png" alt="" /></div>
+            </el-form-item>
+            <el-form-item label="堆放杂物：">
+              <el-radio v-model="radio2" label="2">是</el-radio>
+              <div><img src="@/assets/images/archiveImg.png" alt="" /></div>
+            </el-form-item>
+            <el-form-item label="缺少模拟屏：">
+              <el-radio v-model="radio3" label="3">是</el-radio>
+              <div><img src="@/assets/images/archiveImg.png" alt="" /></div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" :offset="2">
+            <div class="grid-content">
+              <div class="basicTit">其他</div>
+              <div>
+                <el-radio v-model="radio1" label="1">屋顶墙壁渗漏水：</el-radio>
+              </div>
+              <div>
+                <el-radio v-model="radio1" label="1">门窗、墙壁破损：</el-radio>
+              </div>
+              <div>
+                <el-radio v-model="radio1" label="1">灭火器配置不足：</el-radio>
+              </div>
+              <div>
+                <el-radio v-model="radio1" label="1">灭火器超期：</el-radio>
+              </div>
+              <div>
+                <el-radio v-model="radio1" label="1">积灰严重：</el-radio>
+              </div>
+              <div>
+                <el-radio v-model="radio1" label="1">无电工：</el-radio>
+              </div>
+              <div>
+                <el-radio v-model="radio1" label="1">
+                  电工人数配置不足：
+                </el-radio>
+              </div>
+              <div>
+                <el-radio v-model="radio1" label="1">电工证超期：</el-radio>
+              </div>
+              <div>
+                <el-radio v-model="radio1" label="1">
+                  配置不足（绝缘体）：
+                </el-radio>
+              </div>
+              <div  class="mb-10">
+                <el-radio v-model="radio1" label="1">
+                  缺少接地线与存放位置编号：
+                </el-radio>
+              </div>
+              <div>
+                备注:
+              
+                  <el-input v-model="formInfo.remark" style="width:160px"></el-input>
+               
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-dialog>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'CheckVideo',
+  props: {
+    dialogTitle: {
+      type: String,
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {
+      checked: true,
+      showDialog: false,
+      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      radio1: '1',
+      radio2: '2',
+      radio3: '3',
+
+      options: [
+        {
+          value: '选项1',
+          label: '站点一',
+        },
+        {
+          value: '选项2',
+          label: '站点二',
+        },
+        {
+          value: '选项3',
+          label: '站点三',
+        },
+        {
+          value: '选项4',
+          label: '站点四',
+        },
+        {
+          value: '选项5',
+          label: '站点五',
+        },
+      ],
+
+      rules: {
+        watchName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: '请输入设备名称', trigger: 'blur' },
+          {
+            min: 3,
+            max: 6,
+            message: '用户名长度在 3 到 6 个字符',
+            trigger: 'blur',
+          },
+        ],
+        watchCode: [
+          { required: true, message: '请输入设备编号', trigger: 'blur' },
+          {
+            min: 3,
+            max: 6,
+            message: '用户名长度在 3 到 6 个字符',
+            trigger: 'blur',
+          },
+        ],
+        routeAddress: [
+          { required: true, message: '请选则回路表记地址', trigger: 'change' },
+        ],
+        ratedVoltage: [
+          { required: true, message: '请选择站点列表', trigger: 'change' },
+        ],
+        ratedCurrent: [
+          { required: true, message: '请输入已选站点个数', trigger: 'blur' },
+          { trigger: 'blur' },
+        ],
+        fzlMx: [
+          { required: true, message: '请输入挂载设备个数', trigger: 'blur' },
+          { trigger: 'blur' },
+        ],
+      },
+    }
+  },
+  methods: {
+    roleValid(rule, value, callback) {
+      if (value.length === 0) {
+        callback(new Error('角色不能为空'))
+      } else {
+        callback()
+      }
+    },
+
+    // onSelectedDrug(event) {
+    //   this.routeAddress = event;
+    //   console.log(this.routeAddress);
+    // },
+    // 保存操作
+    submitForm(formName) {
+      const params = Object.assign(this.formInfo, {})
+      params
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          this.$message({
+            message: '操作成功！',
+            type: 'success',
+          })
+          this.closeDialog(1)
+        } else {
+          return false
+        }
+      })
+    },
+    // 关闭弹框
+    closeDialog(flag) {
+      //   this.$refs["formInfo"].resetFields();
+      this.showDialog = false
+      this.$emit('closeDialog', flag)
+    },
+  },
+}
+</script>
+ 
+<style scoped lang="scss">
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+// label样式
+.el-form-item__label {
+  width: 150px;
+}
+.el-form-item__content {
+  margin-left: 150px;
+}
+</style>

src/views/systemManage/userManage/dialogComponent.vue

@@ -0,0 +1,167 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+      class="dialog-component"
+      v-model="showDialog"
+      width="640px"
+      @close="closeDialog(0)"
+    >
+      <el-form
+        ref="formInfo"
+        :model="formInfo"
+        class="demo-form-inline"
+        label-width="100px"
+        :rules="rules"
+      >
+        <el-form-item label="账号：" prop="accountNumber">
+          <el-input v-model="formInfo.accountNumber"></el-input>
+        </el-form-item>
+        <el-form-item label="用户名：" prop="userName">
+          <el-input v-model="formInfo.userName"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号码：" prop="phone">
+          <el-input v-model="formInfo.phone"></el-input>
+        </el-form-item>
+         <el-form-item label="告警短信" prop="phone">
+          <el-checkbox v-model="checked1" label="接收"></el-checkbox>
+        </el-form-item>
+       
+
+       
+        <br />
+        <br />
+        <br />
+        <div style="text-align: right">
+          <el-button @click="closeDialog(0)">取消</el-button>
+          <el-button type="primary" @click="submitForm('formInfo')"
+            >确定</el-button
+          >
+        </div>
+      </el-form>
+    </el-dialog>
+  </transition>
+</template>
+
+<script>
+
+
+
+
+export default {
+  name: "DialogComponent",
+  props: {
+    dialogTitle: {
+      type: String,
+      default: "新增",
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      showDialog: false,
+      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      options: [
+        {
+          value: "选项1",
+          label: "站点一",
+        },
+        {
+          value: "选项2",
+          label: "站点二",
+        },
+        {
+          value: "选项3",
+          label: "站点三",
+        },
+        {
+          value: "选项4",
+          label: "站点四",
+        },
+        {
+          value: "选项5",
+          label: "站点五",
+        },
+      ],
+
+      rules: {
+        accountNumber: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入账号", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        userName: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        phone: [
+          { required: false, message: "请输入编号", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    roleValid(rule, value, callback) {
+      if (value.length === 0) {
+        callback(new Error("角色不能为空"));
+      } else {
+        callback();
+      }
+    },
+
+    // 保存操作
+    submitForm(formName) {
+      alert(1)
+      const params = Object.assign(this.formInfo, {});
+      params
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          this.$message({
+            message: "操作成功！",
+            type: "success",
+          });
+          this.closeDialog(1);
+        } else {
+          return false;
+        }
+      });
+    },
+    // 关闭弹框
+    closeDialog(flag) {
+      this.$refs["formInfo"].resetFields();
+      this.showDialog = false;
+      this.$emit("closeDialog", flag);
+    },
+  },
+};
+</script>
+ 
+<style scoped lang="scss">
+.el-input,
+.el-select {
+  width: 240px;
+}
+</style>

src/views/systemManage/userManage/index.vue

@@ -1,5 +1,277 @@
 <template>
-  <div style="padding:30px;">
-   用户管理
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-10">
+      <div class="left">
+        <div>
+          <span class="" style="margin-right: 30px">用户管理列表</span>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+        <div style="margin-top: 20px">
+          <div class="filter-item" >
+          姓名：
+          <el-input
+            v-model="userName"
+            placeholder="请输入内容"
+            style="width: 180px"
+          ></el-input>
+        </div>
+        <div class="filter-item" >
+          手机号：
+          <el-input
+            v-model="phone"
+            placeholder="请输入内容"
+            style="width: 180px"
+          ></el-input>
+        </div>
+
+          <div class="filter-item">
+            所属企业:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 150px"
+            >
+              <el-option label="企业一" value="1"></el-option>
+              <el-option label="企业二" value="2"></el-option>
+            </el-select>
+          </div>
+
+          <div class="filter-item">
+            角色:
+            <el-select
+              v-model="role"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="角色1" value="1"></el-option>
+              <el-option label="角色2" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >查询</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+    >
+      <el-table-column prop="xh" label="序号" width="70">
+      </el-table-column>
+      <el-table-column prop="userName" label="姓名" width="">
+      </el-table-column>
+      <el-table-column prop="sex" label="性别" width="">
+      </el-table-column>
+      <el-table-column prop="contact" label="联系方式" width="">
+      </el-table-column>
+      <el-table-column prop="password" label="密码" width="">
+      </el-table-column>
+      <el-table-column prop="ownerCompany" label="所属企业" width="">
+      </el-table-column>
+      <el-table-column prop="role" label="角色" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            @click="checkItem(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >查看</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+
+
+
+
   </div>
 </template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent, },
+
+  data() {
+    return {
+
+      userName:'',
+      phone:'',
+      region: "",
+      role:'',
+
+      currentPage4: 4,
+
+      showDialog: true,
+
+      tableData: [
+        {
+           xh: "1",
+          userName: "张三",
+          sex: "男",
+          contact: "12345678989 ",
+          password: "123456",
+          role: "维保 ",
+          ownerCompany: "伍继",
+        },
+         {
+          xh: "1",
+          userName: "张三",
+          sex: "男",
+          contact: "12345678989 ",
+          password: "123456",
+          ownerCompany: "伍继",
+           role: "维保 ",
+        },
+         {
+          xh: "1",
+          userName: "张三",
+          sex: "男",
+          contact: "12345678989 ",
+          password: "123456",
+          ownerCompany: "伍继",
+           role: "维保 ",
+        },
+         {
+          xh: "1",
+          userName: "张三",
+          sex: "男",
+          contact: "12345678989 ",
+          password: "123456",
+          ownerCompany: "伍继",
+           role: "维保 ",
+        },
+        {
+          xh: "1",
+          userName: "张三",
+          sex: "男",
+          contact: "12345678989 ",
+          password: "123456",
+          ownerCompany: "伍继",
+           role: "维保 ",
+        },
+       
+      ],
+    };
+
+  },
+  methods: {
+
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 查看视频
+    checkItem(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "查看";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        userName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>