8-14-计量模块

XiaoRuby

2023-08-14 28243550e53fcdf0d8dc4d0dd20f8b35acb4f6ba

 src/components/view/measurementManagement.vue

@@ -3,22 +3,319 @@
    <el-row>
      <el-col :span="12" class="top_left_name">计量管理</el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button size="mini" icon="el-icon-plus" style="color: #000;"
        <el-button
          v-show="radio1 == 2"
          @click="routingJump()"
          type="primary"
          size="mini"
          icon="el-icon-plus"
          style="background: #004EA2; "
          >新增</el-button
        >
        <el-button size="mini"
          ><i class="font icon-xiazaidaoru" style="padding-right: 3px;"></i
          >导出</el-button
        >
      </el-col>
    </el-row>
    <div class="top_div">
      <div class="table_top_div">
        <span>计量编号：</span>
        <el-select
          class="table_top_input"
          size="small"
          v-model="value"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span>仪器设备名称：</span>
        <el-select
          class="table_top_input"
          size="small"
          v-model="value"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span>计量单位：</span>
        <el-select
          class="table_top_input"
          size="small"
          v-model="value"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button size="mini" @click="reset"><span>重 置</span></el-button>
        <el-button
          size="mini"
          type="primary"
          @click="selectSearch"
          style="background: #004EA2;"
          ><span>查 询</span></el-button
        >
      </div>
    </div>
    <div class="middle_div">
      <div class="middle_top_div">
        <el-radio-group class="ai-tab-change" v-model="radio1">
          <el-radio-button size="small" label="1">
            <div class="el_radio_button_div">计量台账</div>
          </el-radio-button>
          <el-radio-button size="small" label="2">
            <div class="el_radio_button_div">计量计划</div>
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="middle_middle_div">
        <el-table
          v-show="radio1 == 1"
          ref="multipleTable"
          :data="tableData"
          border
          tooltip-effect="dark"
          class="middle_middle_table"
          height="calc(100vh - 325px)"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="日期" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-table
          v-show="radio1 == 2"
          ref="multipleTable"
          :data="tableData"
          border
          tooltip-effect="dark"
          class="middle_middle_table"
          height="calc(100vh - 325px)"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="日期" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
      <div class="middle_under_div">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[12, 20, 30, 40]"
          :pager-count="9"
          :page-size="12"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import zhLocale from "element-ui/lib/locale/lang/zh-CN";

// 然后将element-ui中pagination选项改掉
zhLocale.el.pagination = {
  pagesize: "条/页",
  total: `共有 {total} 条`,
  goto: "跳至",
  pageClassifier: "页"
};

export default {
  name: "measurementManagement"
  name: "measurementManagement",
  data() {
    return {
      radio1: 1, // 分类切换
      currentPage4: 4,
      value: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ]
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    routingJump() {
      this.$router.push("/measure/manage");
    }
  }
};
</script>

<style>
.div_acb {
  color: #000000;
.top_div {
  width: 100%;
  height: 70px;
  background-color: #ffffff;
  margin: 5px 0;
}
.middle_div {
  width: 100%;
  height: calc(100vh - 225px);
  background-color: #ffffff;
}
.middle_top_div {
  width: 100%;
  height: 60px;
}
.ai-tab-change {
  padding: 14px 0 15px 15px;
}
.middle_middle_div {
  width: 100%;
  height: calc(100vh - 325px);
  margin-top: 5px;
}
.middle_middle_table {
  width: 98%;
  margin: 0 15px;
}
.middle_under_div {
  width: 99%;
  height: 30px;
  margin-top: 5px;
  text-align: right;
}
.table_top_input {
  width: 13%;
  margin-right: 24px;
}
.table_top_div {
  margin-left: 20px;
  padding: 20px 0;
}
.table_top_div span {
  font-size: 15px;
}
.el-radio-button__inner {
  border: 1px solid #ececed;
  line-height: 14px;
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: #fdfdfe;
  border: 1px solid #2661a0;
  color: #2661a0;
  line-height: 14px;
}
</style>