doctor-admin-components 1.0.13-beta.9 → 1.0.13-beta.90

package/packages/src/views/biz/contractTracing/subCompanyDialog.vue

@@ -1,121 +1,129 @@
 <template>
   <div class="app-container">
     <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
-      <el-table
-        v-if="this.companyType == 'delivery'"
-        v-loading="loading"
-        :data="deliveryCompanyList"
-        key="delivery-table"
-      >
-        <el-table-column
-          :label="$t('contract.consignee')"
-          align="center"
-          prop="companyEnglishName"
-        />
-        <el-table-column :label="$t('contract.taxId')" align="center" prop="taxNumber" />
-        <el-table-column :label="$t('contract.consigneeAddress')" align="center" prop="address" />
-        <el-table-column :label="$t('contract.contact')" align="center" prop="contact" />
-        <el-table-column :label="$t('contract.phoneNumber')" align="center" prop="phoneNumber" />
-        <el-table-column :label="$t('contract.email')" align="center" prop="email" />
-        <el-table-column v-if="channel !== 'official-website'" :label="$t('contract.bliRemark')" align="center" prop="bliRemark" />
-        <el-table-column label="PAN NO." align="center" prop="panNo"></el-table-column>
-        <el-table-column label="PAN NO." align="center" prop="panNo"></el-table-column>
-        <el-table-column label="IEC CODE" align="center" prop="iecCode"></el-table-column>
-        <el-table-column
-          :label="$t('button.operation')"
-          align="center"
-          class-name="small-padding fixed-width"
-          width="200"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="text"
-              @click="updateSubCompany(scope.row)"
-            >{{ $t("button.edit") }}</el-button>
-            <el-button
-              size="mini"
-              type="text"
-              @click="deleteSubCompany(scope.row)"
-            >{{ $t("button.delete") }}</el-button>
-            <el-tag
-              v-if="scope.row.defaultFlag"
-              type="warning"
-              effect="dark"
-              size="small"
-            >{{ $t("button.default") }}</el-tag>
-            <el-button
-              v-else
-              type="text"
-              size="small"
-              @click="setSubCompanyDefault(scope.row)"
-            >{{ $t("button.setDefault") }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-button
-        class="mt10"
-        type="primary"
-        v-if="this.companyType == 'delivery'"
-        size="mini "
-        @click="addSubCompany('delivery')"
-      >{{ $t("button.addCompany") }}</el-button>
+      <span v-if="this.companyType == 'delivery'">
+        <el-card class="box-card" shadow="hover" v-for="item in deliveryCompanyList" :key="item.contractCompanyId">
+          <div slot="header" class="clearfix">
+            <span>{{ item.companyEnglishName }}</span>
+            <div style="float: right; padding: 3px 0">
+              <el-tag v-if="item.defaultFlag" type="warning" effect="dark" size="small">{{ $t('button.default') }}</el-tag>
+              <el-button v-else type="text" size="small" @click="setSubCompanyDefault(item)">{{ $t('button.setDefault') }}</el-button>
+              <el-button size="mini" type="text" @click="updateSubCompany(item)">{{ $t('button.edit') }}</el-button>
+              <el-button style="color: red" size="mini" type="text" @click="deleteSubCompany(item)">{{ $t('button.delete') }}</el-button>
+            </div>
+          </div>
+          <div class="text item">
+            <el-form :model="item">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item :label="$t('contract.consignee')">
+                    {{ item.companyEnglishName }}
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item :label="$t('contract.taxId')">
+                    {{ item.taxNumber }}
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-form-item :label="$t('contract.consigneeAddress')"> {{ item.address }}</el-form-item>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label="PAN NO."> {{ item.panNo }}</el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="GST NUMBER."> {{ item.gstNumber }}</el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="IEC CODE"> {{ item.iecCode }}</el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item :label="$t('contract.contact')"> {{ item.contact }} </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item :label="$t('contract.phoneNumber')"> {{ item.phoneNumber.join() }}</el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item :label="$t('contract.email')"> {{ item.email.join() }}</el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-form-item :label="$t('contract.bliRemark')" v-if="channel !== 'official-website'">{{ item.bliRemark }}</el-form-item>
+              </el-row>
+            </el-form>
+          </div>
+        </el-card>
+      </span>
 
-      <el-table
-        v-loading="loading"
-        :data="notifierCompanyList"
-        v-if="this.companyType == 'notifier'"
-        key="notifier-table"
-      >
-        <el-table-column :label="$t('contract.notifier')" align="center" prop="companyEnglishName" />
-        <el-table-column :label="$t('contract.taxId')" align="center" prop="taxNumber" />
-        <el-table-column :label="$t('contract.notifierAddress')" align="center" prop="address" />
-        <el-table-column :label="$t('contract.contact')" align="center" prop="contact" />
-        <el-table-column :label="$t('contract.phoneNumber')" align="center" prop="phoneNumber" />
-        <el-table-column :label="$t('contract.email')" align="center" prop="email" />
-        <el-table-column label="PAN NO." align="center" prop="panNo"></el-table-column>
-        <el-table-column label="PAN NO." align="center" prop="panNo"></el-table-column>
-        <el-table-column label="IEC CODE" align="center" prop="iecCode"></el-table-column>
-        <el-table-column
-          :label="$t('button.operation')"
-          width="200"
-          align="center"
-          class-name="small-padding fixed-width"
-        >
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              type="text"
-              @click="updateSubCompany(scope.row)"
-            >{{ $t("button.edit") }}</el-button>
-            <el-button
-              size="mini"
-              type="text"
-              @click="deleteSubCompany(scope.row)"
-            >{{ $t("button.delete") }}</el-button>
+      <el-button icon="el-icon-plus" plain class="mt10" type="primary" v-if="this.companyType == 'delivery'" size="mini " @click="addSubCompany('delivery')">{{
+        $t('新增收货人公司')
+      }}</el-button>
 
-            <el-tag
-              v-if="scope.row.defaultFlag"
-              type="warning"
-              effect="dark"
-              size="small"
-            >{{ $t("button.default") }}</el-tag>
-            <el-button
-              v-else
-              type="text"
-              size="small"
-              @click="setSubCompanyDefault(scope.row)"
-            >{{ $t("button.setDefault") }}</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-button
-        class="mt10"
-        v-if="this.companyType == 'notifier'"
-        type="primary"
-        size="mini"
-        @click="addSubCompany('notifier')"
-      >{{ $t("button.addCompany") }}</el-button>
+      <span v-if="this.companyType == 'notifier'">
+        <el-card class="box-card" shadow="hover" v-for="item in notifierCompanyList" :key="item.contractCompanyId">
+          <div slot="header" class="clearfix">
+            <span>{{ item.companyEnglishName }}</span>
+            <div style="float: right; padding: 3px 0">
+              <el-tag v-if="item.defaultFlag" type="warning" effect="dark" size="small">{{ $t('button.default') }}</el-tag>
+              <el-button v-else type="text" size="small" @click="setSubCompanyDefault(item)">{{ $t('button.setDefault') }}</el-button>
+              <el-button size="mini" type="text" @click="updateSubCompany(item)">{{ $t('button.edit') }}</el-button>
+              <el-button style="color: red" size="mini" type="text" @click="deleteSubCompany(item)">{{ $t('button.delete') }}</el-button>
+            </div>
+          </div>
+          <div class="text item">
+            <el-form :model="item">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item :label="$t('contract.consignee')">
+                    {{ item.companyEnglishName }}
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item :label="$t('contract.taxId')">
+                    {{ item.taxNumber }}
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-form-item :label="$t('contract.consigneeAddress')"> {{ item.address }}</el-form-item>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label="PAN NO."> {{ item.panNo }}</el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="GST NUMBER."> {{ item.gstNumber }}</el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="IEC CODE"> {{ item.iecCode }}</el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item :label="$t('contract.contact')"> {{ item.contact }} </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item :label="$t('contract.phoneNumber')"> {{ item.phoneNumber.join() }}</el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item :label="$t('contract.email')"> {{ item.email.join() }}</el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-form-item :label="$t('contract.bliRemark')" v-if="channel !== 'official-website'">{{ item.bliRemark }}</el-form-item>
+              </el-row>
+            </el-form>
+          </div>
+        </el-card>
+      </span>
+
+      <el-button icon="el-icon-plus" plain class="mt10" v-if="this.companyType == 'notifier'" type="primary" size="mini" @click="addSubCompany('notifier')">
+        {{ '新增通知人公司' }}
+      </el-button>
     </el-dialog>
 
     <add-sub-company ref="addSubCompany" @submit="submit" :channel="channel"></add-sub-company>
@@ -123,19 +131,16 @@
 </template>
 
 <script>
-import {
-  listBizContractCompany,
-  delBizContractCompany,
-  updateBizContractCompany,
-} from '../../../api/biz/bizContractCompany';
-import AddSubCompany from './addSubCompany';
+import { Form, Loading } from 'element-ui'
+import { listBizContractCompany, delBizContractCompany, updateBizContractCompany } from '../../../api/biz/bizContractCompany'
+import AddSubCompany from './addSubCompany'
 
 export default {
   name: 'SubCompanyDialog',
   mixins: [],
-  components: { AddSubCompany },
+  components: { AddSubCompany, Form },
   props: {
-    channel: '',
+    channel: ''
   },
   data() {
     return {
@@ -157,20 +162,12 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        companyName: [
-          { required: true, message: '公司名称不能为空', trigger: 'blur' },
-        ],
-        companyCode: [
-          { required: true, message: '公司代码不能为空', trigger: 'blur' },
-        ],
-        createTime: [
-          { required: true, message: '创建时间不能为空', trigger: 'blur' },
-        ],
-        updateTime: [
-          { required: true, message: '更新时间不能为空', trigger: 'blur' },
-        ],
-      },
-    };
+        companyName: [{ required: true, message: '公司名称不能为空', trigger: 'blur' }],
+        companyCode: [{ required: true, message: '公司代码不能为空', trigger: 'blur' }],
+        createTime: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],
+        updateTime: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }]
+      }
+    }
   },
   computed: {},
   watch: {},
@@ -179,82 +176,111 @@ export default {
   methods: {
     //子公司相关操作后刷新列表
     submit() {
-      this.getList();
-      this.$emit('submit');
+      this.getList()
+      this.$emit('submit')
     },
     //新增子公司
     addSubCompany(type) {
-      this.$refs.addSubCompany.handleAdd(this.companyId, type);
+      this.$refs.addSubCompany.handleAdd(this.companyId, type)
     },
     //修改子公司
     updateSubCompany(row) {
-      this.$refs.addSubCompany.handleUpdate(row);
+      this.$refs.addSubCompany.handleUpdate(row)
     },
     /** 查询合同公司记录列表 */
     getList() {
-      this.loading = true;
+      const loading = Loading.service({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
       listBizContractCompany({
-        companyId: this.companyId,
+        companyId: this.companyId
       }).then((response) => {
-        const subCompanyList = response.rows;
+        const subCompanyList = response.rows
         this.deliveryCompanyList = subCompanyList.filter((i) => {
-          return i.companyType == 'delivery';
-        });
+          return i.companyType == 'delivery'
+        })
         this.notifierCompanyList = subCompanyList.filter((i) => {
-          return i.companyType == 'notifier';
-        });
-        this.loading = false;
-      });
+          return i.companyType == 'notifier'
+        })
+        this.open = true
+        loading.close()
+      })
     },
     // 子公司详情
     detailSubCompany(row) {
-      this.$refs.subCompanyDetail.handleDetail(row);
+      this.$refs.subCompanyDetail.handleDetail(row)
     },
     // 新增子公司
     addSubCompany(type) {
-      this.$refs.addSubCompany.handleAdd(this.companyId, type);
+      this.$refs.addSubCompany.handleAdd(this.companyId, type)
     },
     // 修改子公司
     updateSubCompany(row) {
-      this.$refs.addSubCompany.handleUpdate(row);
+      this.$refs.addSubCompany.handleUpdate(row)
     },
     // 删除子公司
     deleteSubCompany(row) {
-      const contractCompanyId = row.contractCompanyId;
+      const contractCompanyId = row.contractCompanyId
       this.$modal
-        .confirm('Do you want to delete the contract company record data item?')
+        .confirm('你确定要删除这个公司吗')
         .then(function () {
-          return delBizContractCompany(contractCompanyId);
+          return delBizContractCompany(contractCompanyId)
         })
         .then(() => {
-          this.getList();
-          this.$modal.msgSuccess('Successfully deleted');
+          this.getList()
+          this.$modal.msgSuccess('Successfully deleted')
         })
-        .catch(() => {});
+        .catch(() => {})
     },
     setSubCompanyDefault(row) {
-      row.defaultFlag = true;
+      row.defaultFlag = true
       updateBizContractCompany(row).then((response) => {
-        this.getList();
-        this.$modal.msgSuccess('Set' + row.companyEnglishName + 'as default');
-      });
+        this.getList()
+        this.$modal.msgSuccess('Set' + row.companyEnglishName + 'as default')
+      })
     },
     /** 选择按钮操作 */
     handleSubCompany(companyId, companyType) {
-      this.open = true;
-      this.companyType = companyType;
-      this.companyId = companyId;
-      const title =
-        companyType == 'delivery'
-          ? this.$t('contract.consigneeCompanyTitle')
-          : companyType == 'notifier'
-          ? this.$t('contract.notifierCompanyTitle')
-          : '';
-      this.title = title;
-      this.getList();
-    },
-  },
-};
+      this.companyType = companyType
+      this.companyId = companyId
+      const title = companyType == 'delivery' ? this.$t('contract.consigneeCompanyTitle') : companyType == 'notifier' ? this.$t('contract.notifierCompanyTitle') : ''
+      this.title = title
+      if (companyId) {
+        this.getList()
+      }
+    }
+  }
+}
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: '';
+}
+.clearfix:after {
+  clear: both;
+}
+
+.box-card {
+  margin-top: 5px;
+}
+</style>
+<style>
+.el-message-box__wrapper {
+  z-index: 9999 !important;
+}
+
+</style>