供方查询

src/dashoo.cn/frontend_web/src/pages/select/companyselect/index.vue

@@ -30,7 +30,7 @@
               v-model="searchForm.SupplierTypeName"
               placeholder="请选择"
             >
-              <el-option label="全部" value=""></el-option>
+              <el-option label="全部" value></el-option>
               <el-option label="物资类" value="01"></el-option>
               <el-option label="基建类" value="02"></el-option>
               <el-option label="技术服务类" value="03"></el-option>
@@ -55,31 +55,51 @@
       </div>
 
       <!--内框表格显示-->
-      <el-table :data="entityList" border height="calc(100vh - 243px)"  style="width: 100%" @sort-change="orderby">
+      <el-table
+        :data="entityList"
+        size="small"
+        border
+        height="calc(100vh - 243px)"
+        style="width: 100%"
+        @sort-change="orderby"
+        @cell-click="handle"
+        @cell-mouse-enter="changeClor"
+        @cell-mouse-leave="backClor"
+      >
         <!--内框表格剩余栏显示-->
         <el-table-column label="准入证号" prop="AccessCardNo" sortable align="center"></el-table-column>
-        <el-table-column label="企业名称" prop="SupplierName" align="center"></el-table-column>
+        <el-table-column label="企业名称" prop="SupplierName" sortable align="center"></el-table-column>
         <el-table-column label="准入类别" prop="SupplierTypeName" align="center"></el-table-column>
         <el-table-column label="法人代表" prop="LegalPerson" align="center"></el-table-column>
         <el-table-column label="注册资金（万元）" prop="RegCapital" sortable align="center"></el-table-column>
         <el-table-column label="移动电话" prop="Mobile" align="center"></el-table-column>
-        <el-table-column label="最后一次年审" prop="" align="center"></el-table-column>
+        <el-table-column label="最后一次年审" prop align="center"></el-table-column>
         <el-table-column label="有效期至" prop="ApplyTime" align="center">
-          <template slot-scope="scope">
-            {{ jstimehandle(scope.row.ApplyTime) }}
-          </template>
+          <template slot-scope="scope">{{ jstimehandle(scope.row.ApplyTime) }}</template>
         </el-table-column>
-        <el-table-column label="状态" prop="InFlag">
+        <el-table-column label="状态" prop="InFlag" align="center">
           <template slot-scope="scope">
-            <el-alert v-if="scope.row.InFlag=='1'" :closable="false" style="background:rgba(255,255,255,0.2)"
-                      title="准入" type="success">
-            </el-alert>
-            <el-alert v-if="scope.row.InFlag=='2'" :closable="false" style="background:rgba(255,255,255,0.2)"
-                      title="暂停" type="warning">
-            </el-alert>
-            <el-alert v-if="scope.row.InFlag=='3'" :closable="false" style="background:rgba(255,255,255,0.2)"
-                      title="取消" type="error">
-            </el-alert>
+            <el-alert
+              v-if="scope.row.InFlag=='1'"
+              :closable="false"
+              style="background:rgba(255,255,255,0.2)"
+              title="准入"
+              type="success"
+            ></el-alert>
+            <el-alert
+              v-if="scope.row.InFlag=='2'"
+              :closable="false"
+              style="background:rgba(255,255,255,0.2)"
+              title="暂停"
+              type="warning"
+            ></el-alert>
+            <el-alert
+              v-if="scope.row.InFlag=='3'"
+              :closable="false"
+              style="background:rgba(255,255,255,0.2)"
+              title="取消"
+              type="error"
+            ></el-alert>
           </template>
         </el-table-column>
       </el-table>
@@ -95,6 +115,20 @@
         :total="currentItemCount"
       ></el-pagination>
     </el-card>
+
+    <!-- 详情框（默认隐藏） -->
+    <el-dialog class="eldialog" title="大港油田公司供方情况一览表" :visible.sync="show" width="1000px">
+      <!--打印内容开始-->
+      <el-form label-width="135px" :model="formData" size="small">
+        <el-row>
+          <el-col :span="16">
+            <el-form-item label="供方名称 :" prop="SupplierName">
+              <el-input v-model="formData.SupplierName" style="width: 100%" readonly></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
@@ -111,50 +145,71 @@ export default {
   },
   data() {
     return {
+      formData: {
+        SupplierName: ""
+      },
+      show: false,
       // 定义列表数据
       entityList: [],
       // 分页参数
       size: 10,
       currentPage: 1,
       currentItemCount: 0,
-      searchForm:{
-        SupplierName:"",
-        SupplierTypeName:""
+      searchForm: {
+        SupplierName: "",
+        SupplierTypeName: ""
       },
-       //列表排序
-        Column: {
-          Order: '',
-          Prop: ''
-        },
+      //列表排序
+      Column: {
+        Order: "",
+        Prop: ""
+      }
     };
   },
 
   methods: {
-     //列表排序功能
-      orderby(column) {
-        if (column.order == 'ascending') {
-          this.Column.Order = 'asc'
-        } else if (column.order == 'descending') {
-          this.Column.Order = 'desc'
-        }
-        this.Column.Prop = column.prop
-        this.initDatas()
-      },
-      jstimehandle(val) {
-        
-        if (val === '') {
-          return '----'
-        } else if (val === '0001-01-01T08:00:00+08:00') {
-          return '----'
-        } else if (val === '0001-01-01T00:00:00Z') {
-          return '----'
-        } else if (val === '5000-01-01T23:59:59+08:00') {
-          return '永久'
-        } else {
-          val = val.replace('T', ' ')
-          return val.substring(0, 10)
-        }
-      },
+    backClor(row, column, event, cell) {
+      if (column.property === "SupplierName") {
+        event.style.background = "";
+      }
+    },
+    changeClor(row, column, event, cell) {
+      if (column.property === "SupplierName") {
+        event.style.background = "#d3dce6";
+      }
+    },
+    handle(row, column, event, cell) {
+      if (column.property === "SupplierName") {
+        console.log(row);
+        this.formData.SupplierName = row.SupplierName;
+        this.show = true;
+      }
+    },
+
+    //列表排序功能
+    orderby(column) {
+      if (column.order == "ascending") {
+        this.Column.Order = "asc";
+      } else if (column.order == "descending") {
+        this.Column.Order = "desc";
+      }
+      this.Column.Prop = column.prop;
+      this.initDatas();
+    },
+    jstimehandle(val) {
+      if (val === "") {
+        return "----";
+      } else if (val === "0001-01-01T08:00:00+08:00") {
+        return "----";
+      } else if (val === "0001-01-01T00:00:00Z") {
+        return "----";
+      } else if (val === "5000-01-01T23:59:59+08:00") {
+        return "永久";
+      } else {
+        val = val.replace("T", " ");
+        return val.substring(0, 10);
+      }
+    },
     //初始化列表方法
     initDatas(event) {
       console.log(event);
@@ -165,7 +220,7 @@ export default {
         _size: this.size,
         _currentPage: this.currentPage,
         Order: this.Column.Order,
-        Prop: this.Column.Prop,
+        Prop: this.Column.Prop
       };
 
       api
@@ -204,3 +259,9 @@ export default {
 };
 </script>
 
+<style>
+.eldialog input.el-input__inner {
+  border:none;
+}
+</style>
+