加油站管理-出售记录

src/views/szqy/components/csjlDialog.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="myDialog">
+    <el-dialog
+      title="加油站详情"
+      :visible.sync="isShow"
+      width="70%"
+      :before-close="handleClose">
+      <div class="history">
+        <div class="top">
+          <div class="lf">
+            <img src="https://img2.baidu.com/it/u=1900348726,796248972&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="">
+          </div>
+          <div class="rt">
+            <p>
+              <span class="name">{{parentData.jyzmc}}</span>
+            </p>
+            <p class="address">{{parentData.jyzxz}}</p>
+          </div>
+        </div>
+
+        <div class="table_List">
+            <span @click="tabClk(index)" v-for="(item,index) in tabMenu" class="default" :class="{'active':isActive==index}">{{item.title}}</span>
+        </div>
+
+        <el-table v-if="isActive==1"
+                  :data="dhData"
+                  style="width: 100%;margin-top: 24px">
+          <el-table-column
+            type="index"
+            label="#"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            label="购买方类型"
+            width="180">
+            <template slot-scope="scope">
+              <span class="dot" :class="'dot'+scope.row.status" v-html="getStatus(scope.row.status)"></span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="购买方名称">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="购买方证件号"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            label="购买方电话">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="购买时间"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="汽油型号">
+          </el-table-column>
+          <el-table-column
+            label="是否合规购油">
+            <template slot-scope="scope">
+              <span class="dot" :class="'dot'+scope.row.status" v-html="getSf(scope.row.sf)"></span>
+            </template>
+          </el-table-column>
+        </el-table>
+
+
+
+
+      </div>
+      <div style="text-align: right"><el-button class="mybutton" type="primary" @click="handleClose">确 定</el-button></div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "csjlDialog",
+  props:{
+    parentData:{
+      type:Object
+    },
+    isShow:{
+      type:Boolean
+    }
+  },
+  data(){
+    return{
+      isActive:1,
+      tabMenu:[{title:'基础信息'},{title:'出售记录'}],
+      dialogVisible: false,
+      dhData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄',
+        status:0,
+        sf:0
+      },{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄',
+        status:1,
+        sf:1
+      }],
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }]
+    }
+  },
+  methods:{
+    tabClk(index){
+      this.isActive = index
+    },
+    getStatus(st){
+      switch (st) {
+        case 0:
+          return  `<span>个人</span>`;
+          break
+        case 1:
+          return  `<span>企业</span>`;
+          break
+      }
+    },
+    getSf(st){
+      switch (st) {
+        case 0:
+          return  `<span>是</span>`;
+          break
+        case 1:
+          return  `<span>否</span>`;
+          break
+      }
+    },
+    handleClose(){
+      this.$emit('closeDialog')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.table_List{
+  margin-top: 20px;
+  border-bottom: 1px solid #E7E7E7;
+  .default{
+    display: inline-block;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 22px;
+    color: #6F7CA3;
+    text-align: center;
+    font-style: normal;
+    box-sizing: border-box;
+    padding: 12px 0;
+    border-bottom: 3px solid transparent;
+    margin-right: 15px;
+    cursor: pointer;
+  }
+  .active{
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 600;
+    font-size: 22px;
+    color: rgba(4,8,20,0.9);
+    text-align: center;
+    font-style: normal;
+    padding: 12px 0;
+    border-bottom: 3px solid #106DFF;
+  }
+}
+.dot{
+  display: inline-block;
+  padding-left: 12px;
+  position: relative;
+  &:before{
+    position: absolute;
+    content: '';
+    width: 5px;
+    height: 5px;
+    border-radius:50%;
+    left: 0px;
+    top: 10px;
+  }
+}
+.dot0{
+  color: #909399;
+  &:before{
+    background: #909399;
+  }
+}
+.dot1{
+  color: #ED7B2F;
+  &:before{
+    background: #ED7B2F;
+  }
+}
+.myDialog{
+  .mybutton{
+    width: 88px;
+    height: 38px;
+    background: #106DFF;
+    line-height: 38px;
+    border-radius: 22px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
+    font-size: 17px;
+    color: #FFFFFF;
+    text-align: center;
+    font-style: normal;
+    margin-top: 20px;
+    padding: 0;
+  }
+  .history{}
+  .top{
+    display: grid;
+    grid-template-columns: 120px calc(100% - 120px);
+    .lf{
+      img{
+        width: 120px;
+      }
+    }
+    .rt{
+      padding: 0 12px;
+      box-sizing: border-box;
+      p{
+        .name{
+          height: 33px;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 600;
+          font-size: 22px;
+          color: rgba(4,8,20,0.9);
+          line-height: 33px;
+          text-align: left;
+          font-style: normal;
+        }
+        .sfz{
+          height: 30px;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 19px;
+          color: #6F7CA3;
+          line-height: 30px;
+          text-align: left;
+          font-style: normal;
+        }
+        .tel{
+          height: 30px;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 19px;
+          color: #242F52;
+          line-height: 30px;
+          text-align: left;
+          font-style: normal;
+        }
+        .address{
+          height: 30px;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 19px;
+          color: #242F52;
+          line-height: 30px;
+          text-align: left;
+          font-style: normal;
+        }
+      }
+
+    }
+  }
+}
+::v-deep{
+  .el-dialog{
+    border-radius: 22px;
+  }
+}
+</style>

src/views/szqy/components/jyzglTable.vue

@@ -18,10 +18,11 @@
                 <el-button @click="rowView(scope.row)" type="text" size="mini">查看</el-button>
                 <el-button @click="rowEdit(scope)" type="text" size="mini">修改</el-button>
                 <el-button @click="rowDelete(scope)" type="text" size="mini">删除</el-button>
-                <el-button @click="rowHistory(scope)" type="text" size="mini">出售记录</el-button>
+                <el-button @click="rowHistory(scope.row)" type="text" size="mini">出售记录</el-button>
             </template>
         </TableDom>
         <DialogBody ref="DialogBody" title="加油站详情"></DialogBody>
+        <csjlDialog ref="csjlDialog" :is-show="dialogVisible" @closeDialog="dialogVisible=false" :parentData="propRow"></csjlDialog>
     </div>
 </template>
 <script>
@@ -29,12 +30,14 @@ import TableDom from '@/components/table-dom/index.vue'
 import jyzglSearch from './jyzglSearch.vue';
 import mixintdry from "@/mixins/tdry";
 import DialogBody from '@/components/dialog-body/index.vue'
-
+import csjlDialog from "@/views/szqy/components/csjlDialog";
 export default {
     mixins: [mixintdry()],
-    components: { TableDom, jyzglSearch, DialogBody },
+    components: { TableDom, jyzglSearch, DialogBody,csjlDialog},
     data() {
         return {
+            dialogVisible:false,
+            propRow:[],
             tableList: [
                 {
                     jyzmc: '中国石化加油加气站(金川街CNG站)',
@@ -58,8 +61,9 @@ export default {
         }
     },
     methods: {
-        rowView(row){
-
+      rowHistory(row){
+          this.propRow = row
+          this.dialogVisible = true
         },
         add() {
             this.$store.commit('CH_JYZGL', 'jyzglAdd')
@@ -73,4 +77,4 @@ export default {
 </script>
 <style lang="scss" scoped>
 @use '@/styles/public/table-style.scss';
-</style>
+</style>

src/views/szqy/jyzgl.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="route_body">
         <jyzglTable ref="jyzglTable" v-if="jyzgl == 'jyzglTable'" @postData="postData"></jyzglTable>
         <jyzglEdit ref="jyzglEdit" v-if="(jyzgl == 'jyzglEdit') || (jyzgl == 'jyzglAdd')" :editData="editData"></jyzglEdit>
     </div>
@@ -25,4 +25,8 @@ export default {
         }
     }
 }
-</script>
+</script>
+<style lang="scss" scoped>
+@use '@/styles/public/table-style.scss';
+
+</style>