jf-frock/src/views/BidSystem/DeepeningOrder/deepDetail.vue

<template>
  <div class="changeDetail">
    <Toptitle :title="type == 3 ? '深化单详情' :type==10?'深化单新增':'深化单编辑'">
      <slot name="titleButton">
        <!-- <Button type="primary" style="margin-right: 10px" v-if="type == 6||type ==10"
          >开启拆单</Button
        > -->
        <Button type="primary" style="margin-right: 10px" v-if="type == 3"
          >批量下生产</Button
        >
        <Button
          @click="goback()"
          type="primary"
          ghost
          style="margin-right: 10px"
          >返回</Button
        >
        <Button
          type="primary"
          style="margin-right: 10px"
          v-if="type == 2||type == 10"
          @click="save"
          >保存</Button
        >
      </slot>
    </Toptitle>
    <div class="content">
      <div class="form">
        <Form class="form_content" :label-width="100">
          <FormItem label="项目编号:">
            <Input
              v-if="type == 2||type == 10"
              v-model="formData.order_no"
              placeholder="项目编码"
            />
            <span style="width: 120px" v-else>{{ formData.order_no }}</span>
          </FormItem>
          <FormItem label="项目名称:">
            <Input
              v-if="type == 2||type == 10"
              v-model="formData.residential_name"
              placeholder="请输入项目名称"
            />
            <span v-else>{{ formData.residential_name }}</span>
          </FormItem>
          <FormItem label="项目简称:">
            <Input
              v-if="type == 2||type == 10"
              v-model="formData.abbreviation"
              placeholder="请输入项目简称"
            />
            <span v-else>{{ formData.abbreviation }}</span>
          </FormItem>
          <FormItem label="客户名称:">
            <Select
              filterable
              clearable
              v-model="formData.custom_id"
              @on-change="handleCustomSelect"
              v-if="type == 2||type == 10"
            >
              <Option
                v-for="(item, index) in custom_title_list"
                :key="index"
                :label="item.title"
                :value="item.id"
              ></Option>
            </Select>
            <span v-else>{{ formData.custom_title }}</span>
          </FormItem>
          <FormItem label="紧急程度:">
            <Select clearable v-model="formData.warning_state" v-if="type == 2||type == 10">
              <Option
                v-for="(item, index) in warning_state_list"
                :key="index"
                :label="item.title"
                :value="item.id"
              ></Option>
            </Select>
            <span v-else>{{ formData.warning_state }}</span>
          </FormItem>
          <FormItem label="项目定金:">
            <Input
              v-if="type == 2||type == 10"
              v-model="formData.front_money"
              placeholder="请输入项目定金"
            />
            <span v-else>{{ formData.front_money }}</span>
          </FormItem>
          <FormItem label="详细地址:">
              <Input
              v-if="type == 2||type == 10"
              v-model="formData.address"
              placeholder="请输入详细地址"
            />
            <span v-else>{{ formData.address }}</span>
          </FormItem>
          <FormItem label="手机号:">
           <Input
              v-if="type == 2||type == 10"
              v-model="formData.mobile"
              placeholder="请输入手机号"
            />
            <!-- <span v-else>{{ formData.mobile }}</span> -->
            <span v-else>{{
              clientDetailList_mobile.filter(
                (v) => v.mobile == saveData.custom_detail_mobile
              ).length > 0
                ? clientDetailList_mobile.filter(
                    (v) => v.mobile == saveData.custom_detail_mobile
                  )[0].mobile
                : formData.mobile
            }}</span>
          </FormItem>
          <FormItem label="开始日期:">
            <DatePicker
              type="date"
              v-model="formData.start_time"
              placeholder="年/月/日"
              style="width: 150px"
              v-if="type == 2||type == 10"
            ></DatePicker>
            <span v-else>{{ this.func.replaceDateNoHMS(formData.start_time) }}</span>
          </FormItem>
          <FormItem label="交付日期:">
            <DatePicker
              type="date"
              v-model="formData.end_time"
              placeholder="年/月/日"
              style="width: 150px"
              v-if="type == 2||type == 10"
            ></DatePicker>
            <span v-else>{{ this.func.replaceDateNoHMS(formData.end_time) }}</span>
          </FormItem>
          <FormItem label="业务员:">
            <Select
              filterable
              clearable
              v-model="formData.nickname_id"
              v-if="type == 2||type == 10"
            >
              <Option
                v-for="(item, index) in nickname_list"
                :key="index"
                :label="item.nickname"
                :value="item.id"
              ></Option>
            </Select>
            <span v-else>{{ formData.nickname }}</span>
          </FormItem>
          <FormItem label="备注:">
            <Input
              v-if="type == 2||type == 10"
              v-model="formData.remark"
              type="textarea"
              placeholder="请输入备注"
            />
            <span v-else>{{ formData.remark }}</span>
          </FormItem>
        </Form>
      </div>
      <Card style="width: 100%" class="card">
        <div class="form_middle">
          <Form class="form_middle_content" :label-width="100">
            <FormItem label="区域编码:">
              <Select
                filterable
                multiple
                v-model="searchData.area_code"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in area_code"
                  :key="index"
                  :label="item.area_code"
                  :value="item.area_code"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="区域名称:">
              <Select
                filterable
                multiple
                v-model="searchData.area_title"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in area_title"
                  :key="index"
                  :label="item.area_title"
                  :value="item.area_title"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="户型:">
              <Select
                filterable
                multiple
                v-model="searchData.house_type"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in house_type"
                  :key="index"
                  :label="item.house_type"
                  :value="item.house_type"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="楼栋:">
              <Select
                filterable
                multiple
                v-model="searchData.house"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in house"
                  :key="index"
                  :label="item.house"
                  :value="item.house"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="单元:">
              <Select
                filterable
                multiple
                v-model="searchData.unit"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in unit"
                  :key="index"
                  :label="item.unit"
                  :value="item.unit"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="楼层:">
              <Select
                filterable
                multiple
                v-model="searchData.layer"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in layer"
                  :key="index"
                  :label="item.layer"
                  :value="item.layer"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="房号:">
              <Select
                filterable
                multiple
                v-model="searchData.number"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in number"
                  :key="index"
                  :label="item.number"
                  :value="item.number"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="位置:">
              <Select
                filterable
                multiple
                v-model="searchData.position"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in position"
                  :key="index"
                  :label="item.position"
                  :value="item.position"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="产品分类:">
              <Select
                filterable
                multiple
                v-model="searchData.product_type"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in product_type"
                  :key="index"
                  :label="item.product_type"
                  :value="item.product_type"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="图号:">
              <Select
                filterable
                multiple
                v-model="searchData.url_number"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in url_number"
                  :key="index"
                  :label="item.url_number"
                  :value="item.url_number"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="产品名称:">
              <Select
                filterable
                multiple
                v-model="searchData.product_title"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in product_title"
                  :key="index"
                  :label="item.product_title"
                  :value="item.product_title"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="材质:">
              <Select
                filterable
                clearable
                v-model="searchData.material"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in material"
                  :key="index"
                  :label="item"
                  :value="item"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="颜色:">
              <Select
                filterable
                clearable
                v-model="searchData.color"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in color"
                  :key="index"
                  :label="item"
                  :value="item"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="工艺:">
              <Select
                filterable
                clearable
                v-model="searchData.work"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in work"
                  :key="index"
                  :label="item"
                  :value="item"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="左右式:">
              <Select
                filterable
                multiple
                v-model="searchData.fashion"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in fashion"
                  :key="index"
                  :label="
                    item.fashion === 0
                      ? '无'
                      : item.fashion === 1
                      ? '左式'
                      : '右式'
                  "
                  :value="item.fashion"
                ></Option>
              </Select>
            </FormItem>
            <FormItem label="拆单状态:">
              <Select
                filterable
                clearable
                v-model="searchData.state"
                size="small"
                style="width: 120px"
              >
                <Option
                  v-for="(item, index) in state"
                  :key="index"
                  :label="item.state === 0 ? '未拆单' : '已拆单'"
                  :value="item.state"
                ></Option>
              </Select>
            </FormItem>
            <FormItem>
              <Button
                @click="search"
                style="margin-right: 10px"
                type="primary"
                ghost
                >搜索</Button
              >
            </FormItem>
          </Form>
        </div>
        <Tabs type="card" @on-click="getData">
          <TabPane
            v-for="tab in tabs"
            :key="tab"
            :label="tab == 1 ? '汇总' : '明细'"
            style="margin: 0 auto"
          >
            <div v-show="tab === 1">
              <Table :columns="totalColumns" :data="totalData" border>
                <template slot="setSlot" slot-scope="{ row }">
                  <a @click="handleGoPage(row)">详情</a>
                </template>
                <template slot="urlSet" slot-scope="{ row,index }">
                   <div class="items">
                <img 
                @click="looks(totalData[index].url)"
                :src='$store.state.ip + row.url[0]' alt=""/>
                </div>
                  <!-- v-show="totalData[index].url.length !== 0 ? true : false"-->
                    <!-- <img
                      @click="looks(totalData[index].url)"
                     
                      :key="idx"
                      :src="$store.state.ip + el"
                      alt=""
                    /> -->
                 
                </template>
              </Table>
              <Page
                :page-size-opts="[10, 20, 30, 40, 100, 1000]"
                @on-page-size-change="changeTotalSize"
                @on-change="changeTotalPage"
                :current="page_index"
                show-total
                :total="total"
                show-sizer
                :page-size="page_size"
                style="text-align: center; margin-top: 10px"
              />
            </div>
            <div v-show="tab === 2">
              <Table :columns="detailColumns" :data="detailData" border>
                <template slot="setSlot" slot-scope="{ row }">
                  <a @click="handleDel(row)">删除</a>
                </template>
                <template slot="urlSet" slot-scope="{ row,index }">
                  <div
                    class="items"
                    v-show="detailData[index].url.length != 0 ? true : false">
                    <img
                      @click="looks(detailData[index].url)"
                      :src="$store.state.ip + row.url[0]"
                      alt=""
                    />
                  </div>
                </template>
              </Table>
              <Page
                :page-size-opts="[10, 20, 30, 40, 100, 1000]"
                @on-page-size-change="changeDetailSize"
                @on-change="changeDetailPage"
                :current="page_index"
                show-total
                :total="total"
                show-sizer
                :page-size="page_size"
                style="text-align: center; margin-top: 10px"
              />
            </div>
          </TabPane>
          <div slot="extra" class="upload">
            <Button
              @click="handleTabsAdd"
              size="small"
              style="margin-right: 10px"
              type="primary"
              ghost
              v-if="false"
              >新增</Button
            >
             <Upload
              :headers="headers"
              name="your_file"
              :data="uploadData"
              :show-upload-list="false"
              :on-error="uploadError"
              :on-success="uploadSuccess"
              :before-upload="handleBeforeUpload"
              :action="$store.state.ip + '/api/deep_img_import'"
              style="margin-right: 10px"
            >
              <Button size="small" type="primary" >图纸导入</Button>
            </Upload>
            <Upload
              :headers="headers"
              name="your_file"
              :data="uploadData"
              :show-upload-list="false"
              :on-error="uploadError"
              :on-success="uploadSuccess"
              :before-upload="handleBeforeUpload"
              :action="$store.state.ip + '/api/deep_import_new'"
              style="margin-right: 10px"
            >
              <Button size="small" type="primary" ghost>导入</Button>
            </Upload>
          </div>
        </Tabs>
      </Card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur",
          },
        ],
      },
      totalColumns: [
        // { type: "selection", align: "center", width: 60 },
        { title: "序号", align: "center", type: "index", minWidth: 200 },
        {
          title: "楼号",
          align: "center",
          key: "house",
          minWidth: 200,
        },
        {
          title: "产品名称",
          align: "center",
          key: "product_title",
          minWidth: 200,
        },
        { title: "图号", align: "center", key: "url_number", minWidth: 200 },
        { title: "规格", align: "center", key: "model", minWidth: 200,
        render:(h,params)=>{
            const {row} = params;
            const text = `${row.long}*${row.wide}*${row.high}`
            return h('span',{},text)
        } },
        // { title: "型号", align: "center", key: "model", minWidth: 200 },
      
        // { title: "长", align: "center", key: "long", minWidth: 200 },
        // { title: "宽", align: "center", key: "wide", minWidth: 200 },
        // { title: "高", align: "center", key: "high", minWidth: 200 },
        // { title: "材质", align: "center", key: "material", minWidth: 200 },
        { title: "饰面", align: "center", key: "process_property", minWidth: 200 },
          { title: "数量", align: "center", key: "num", minWidth: 200 },
        // { title: "工艺", align: "center", key: "work", minWidth: 200 },
        {
          title: "图纸",
          align: "center",
          key: "url",
          minWidth: 200,
          slot: "urlSet",
        },
       
        // { title: "备注", align: "center", key: "remark", minWidth: 200 },
        // {
        //   title: "拆单状态",
        //   align: "center",
        //   key: "state",
        //   minWidth: 200,
        //   render: (h, params) => {
        //     const { row } = params;
        //     return h("span", {}, row.state == 0 ? "未拆单" : "已拆单");
        //   },
        // },
        // { title: "操作", align: "center", minWidth: 200, slot: "setSlot" },
      ],
      totalData: [],
      headers: { Authorization: localStorage.getItem("token") },
      detailColumns: [
        // { type: "selection", align: "center", width: 60 },
        { title: "序号", align: "center", type: "index", minWidth: 200 },
        // { title: "区域编码", align: "center", key: "area_code", minWidth: 200 },
        // {
        //   title: "区域名称",
        //   align: "center",
        //   key: "area_title",
        //   minWidth: 200,
        // },
       
        { title: "楼号", align: "center", key: "house", minWidth: 200 },
        { title: "单元", align: "center", key: "unit", minWidth: 200 },
        { title: "楼层", align: "center", key: "layer", minWidth: 200 },
        { title: "房号", align: "center", key: "number", minWidth: 200 },
         { title: "房型", align: "center", key: "house_type", minWidth: 200 },
        // { title: "位置", align: "center", key: "position", minWidth: 200 },
        // {
        //   title: "产品分类",
        //   align: "center",
        //   key: "product_type",
        //   minWidth: 200,
        // },
        {
          title: "产品名称",
          align: "center",
          key: "product_title",
          minWidth: 200,
        },
         {
          title: "左右式",
          align: "center",
          key: "fashion",
          minWidth: 200,
          render: (h, params) => {
            const { row } = params;
            return h(
              "span",
              {},
              row.left_right_mode == 1
                ? "左式"
                : row.left_right_mode == 2
                ? "右式"
                : "无"
            );
          },
        },
        
        { title: "图号", align: "center", key: "url_number", minWidth: 200 },
         {
          title: "图纸",
          align: "center",
          key: "url",
          minWidth: 200,
          slot: "urlSet",
        },
         { title: "饰面", align: "center", key: "process_property", minWidth: 200 },
         { title: "规格", align: "center", key: "model", minWidth: 200,
        render:(h,params)=>{
            const {row} = params;
            const text = `${row.long}*${row.wide}*${row.high}`
            return h('span',{},text)
        } },
        { title: "数量", align: "center", key: "num", minWidth: 200 },
        {
          title: "单位",
          align: "center",  
          key: "product_unit",
          minWidth: 200,
        },
        // { title: "型号", align: "center", key: "model", minWidth: 200 },
        
        // { title: "长", align: "center", key: "long", minWidth: 200 },
        // { title: "宽", align: "center", key: "wide", minWidth: 200 },
        // { title: "高", align: "center", key: "high", minWidth: 200 },
        // { title: "材质", align: "center", key: "material", minWidth: 200 },
       
        // { title: "工艺", align: "center", key: "work", minWidth: 200 },
       
       
        { title: "备注", align: "center", key: "remark", minWidth: 200 },
        {
          title: "拆单状态",
          align: "center",
          key: "state",
          minWidth: 200,
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, row.state == 0 ? "未拆单" : "已拆单");
          },
        },
         { title: "下单日期", align: "center", key: "crt_time", minWidth: 200,
         render:(h,params)=>{
             const {row} = params;
              const text = this.func.replaceDateNoHMS(row.crt_time);
              h('span',{},text)
         } },
          { title: "交货日期", align: "center", key: "arrive_time", minWidth: 200,
            render:(h,params)=>{
             const {row} = params;
              const text = this.func.replaceDateNoHMS(row.arrive_time);
              h('span',{},text)
         }
          },
           { title: "下单编号", align: "center", key: "order_number", minWidth: 200 },
            { title: "下单序号", align: "center", key: "order_numbers", minWidth: 200 },
        { title: "操作", align: "center", minWidth: 200, slot: "setSlot" },
      ],
      detailData: [],
      saveData: {
        abbreviation: "",
        address: "",
        custom_title: "",
        end_time: "",
        front_money: "",
        mobile: "",
        nickname: "",
        order_no: "",
        remark: "",
        residential_name: "",
        start_time: "",
        warning_state: "",
        custom_detail_mobile: "",
        custom_detail_id: "",
      },
      formData: {
          mobile:''
      },
      custom_title_list: [],
      warning_state_list: [],
      nickname_list: [],
      searchData: {
        area_code: [],
        area_title: [],
        house_type: [],
        product_type: [],
        fashion: [],
        house: [],
        unit: [],
        layer: [],
        number: [],
        position: [],
        url_number: [],
        product_title: [],
        material: "",
        color: "",
        work: "",
        state: "",
      },
      area_code: [],
      area_title: [],
      house_type: [],
      house: [],
      unit: [],
      layer: [],
      number: [],
      position: [],
      url_number: [],
      product_title: [],
      product_type: [],
      fashion: [],
      material: [],
      color: [],
      work: [],
      state: [],
      search_state: false,
      copy_form: [],
      type: this.$route.query.type,
      tabs: 2,
      total: 0,
      page_index: 1,
      page_size: 10,
      save_state: false,
      currency_tag: 0,
      clientDetailList: [],
      clientDetailList_respon: [],
      clientDetailList_mobile: [],
      clientDetailList_address: [],
    };
  },
  computed: {
    uploadData() {
      return { order_no: this.formData.order_no || this.$route.query.order_no };
    },
  },
  created() {
      if(this.$route.query.type!=10){
      this.axios
        .get("/api/order_area_orders", {
          params: {
            order_no: this.$route.query.order_no,
            oa_id: this.$route.query.oa_id,
          },
        })
        .then((res) => {
          this.formData = res.data;
          this.handleCustomSelect(res.data.custom_id)
        });
      }
    
      this.axios.get("/api/custom_list").then((res) => {
        this.custom_title_list = res.data.data;
      });
      this.axios.get("/api/warning_list").then((res) => {
        this.warning_state_list = res.data.data;
      });
      this.axios
        .get("/api/employee_list", { params: { type: 2 } })
        .then((res) => {
          this.nickname_list = res.data;
        });
    
  },
  mounted(){
      if(this.$route.query.type!=10){
           this.getData();
      }
    if(this.$route.query.type==3){
        this.detailColumns.pop();
    }

  },
  methods: {
    looks(arr) {
      // const array = [{ img_url: img }];
      const array = arr.map((v) => {
        return { img_url: v };
      });
      this.$previewImg({
        list: array,
        baseUrl: this.$store.state.ip,
        baseImgField: "img_url",
        baseTitleField: "",
      });
    },
    handleBeforeUpload() {console.log(this.formData)},
    handleClientDetailChange(val) {
      val && (this.info.custom_detail_id = val);
    },
    handleCustomSelect(id) {
        console.log(id)
      id &&
        this.axios({
          method: "get",
          url: "/api/custom_detail",
          params: { id },
        }).then((res) => {
          this.clientDetailList = res.data.list;
          // 去重负责人
          this.clientDetailList_respon = this.unique(res.data.list);
          // 赋值默认负责人
          this.saveData.custom_detail_name = this.clientDetailList_respon[0].service_name;
          // 取出手机号码是该负责人的
          this.clientDetailList_mobile = this.clientDetailList.filter(
            (item) => item.service_name == this.saveData.custom_detail_name
          );
          // 赋值默认手机号码
          this.formData.mobile = this.clientDetailList_mobile[0].mobile;
          this.saveData.custom_detail_mobile = this.clientDetailList_mobile[0].mobile;
          // 去重手机号码
          this.clientDetailList_mobile = this.unique(
            this.clientDetailList_mobile
          );
          // 取出地址是该负责人的
          this.clientDetailList_address = this.clientDetailList.filter(
            (item) => item.service_name == this.saveData.custom_detail_name
          );
          // 赋值默认地址
          console.log(this.clientDetailList_address)
          this.formData.address = this.clientDetailList_address[0].address;
          this.formData.custom_detail_id =
            this.clientDetailList_respon[0].id || 0;
          this.saveData.service_id = res.data.detail.service_id;
          // this.$forceUpdate();
        });
    },
    unique(array) {
      let arr = JSON.parse(JSON.stringify(array));
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].service_name == arr[j].service_name) {
            //第一个等同于第二个，splice方法删除第二个
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    handleGoPage(row) {
      this.$router.push({
        path: "/cms/BidSystem/ProductDeOrder/deorderdetail",
        query: {
          type: 3,
          order_no: this.$route.query.order_no || this.saveData.order_no,
          oa_id: row.oa_id,
          orders_area_product_detail_id: row.id,
        },
      });
    },
  handleDel(row){
       this.confirmDelete({
        content: '是否确认？',
        then: () => {
            this.axios.get('/api/order_area_details_del',{params:{id:row.id}}).then(res=>{
            if(res.code == 200){
                this.$Message.success(res.msg)
                this.getData(this.currency_tag);
            }
        })
        }
      })
      
  },
    handleTabsChange(name) {
      this.currency_tag = name;
      this.getData(name);
    },
    changeTotalSize(e) {
      this.page_size = e;
      this.getData(0);
    },
    changeTotalPage(e) {
      this.page_index = e;
      this.getData(0);
    },
    changeDetailSize(e) {
      this.page_size = e;
      this.getData(1);
    },
    changeDetailPage(e) {
      this.page_index = e;
      this.getData(1);
    },
    getData(type) {
        this.currency_tag = type;
      if (type == 1) {
        if (this.search_state) {
            console.log('明细')
          this.axios
            .post("/api/order_area_details", {
              order_no: this.$route.query.order_no || this.formData.order_no,
              oa_id: this.$route.query.oa_id,
              page_index: this.page_index,
              page_size: this.page_size,
              ...this.searchData,
            })
            .then((res) => {
              console.log(res);
              this.detailData = res.data.data;
              this.total = res.data.total;
            });
        } else {
        //   this.$route.query.order_no &&
        console.log(1)
            this.axios
              .post("/api/order_area_details", {
                order_no: this.$route.query.order_no || this.formData.order_no,
                oa_id: this.$route.query.oa_id,
                page_index: this.page_index,
                page_size: this.page_size,
                ...this.searchData
              })
              .then((res) => {
                console.log(res);
                this.detailData = res.data.data;
                this.total = res.data.total;
                this.area_code = res.data.area_code;
                this.area_title = res.data.area_title;
                this.color = res.data.color;
                this.fashion = res.data.fashion;
                this.house = res.data.house;
                this.house_type = res.data.house_type;
                this.layer = res.data.layer;
                this.material = res.data.material;
                this.number = res.data.number;
                this.position = res.data.position;
                this.product_title = res.data.product_title;
                this.product_type = res.data.product_type;
                this.state = res.data.state;
                this.unit = res.data.unit;
                this.url_number = res.data.url_number;
                this.work = res.data.work;
                this.copy_form = this.searchData;
              });
        }
      } else if (type == 0) {
        console.log("111 :>> ", 111);
        this.axios
          .post("/api/order_area_details", {
            type: 1,
            order_no: this.$route.query.order_no || this.formData.order_no,
            page_index: this.page_index,
            oa_id: this.$route.query.oa_id,
            page_size: this.page_size,
            ...this.searchData,
          })
          .then((res) => {
            console.log(res);
            this.detailData = res.data.data;
            this.totalData = res.data.data;
            this.total = res.data.total;
            this.area_code = res.data.area_code;
            this.area_title = res.data.area_title;
            this.color = res.data.color;
            this.fashion = res.data.fashion;
            this.house = res.data.house;
            this.house_type = res.data.house_type;
            this.layer = res.data.layer;
            this.material = res.data.material;
            this.number = res.data.number;
            this.position = res.data.position;
            this.product_title = res.data.product_title;
            this.product_type = res.data.product_type;
            this.state = res.data.state;
            this.unit = res.data.unit;
            this.url_number = res.data.url_number;
            this.work = res.data.work;
            this.copy_form = this.searchData;
          });
      } else {
        this.axios
          .post("/api/order_area_details", {
            type: this.$route.query.type,
            oa_id: this.$route.query.oa_id,
            order_no: this.$route.query.order_no || this.formData.order_no,
            ...{ page_index: this.page_index, page_size: this.page_size },
            ...this.searchData,
          })
          .then((res) => {
            console.log(res.msg.house_type, this.house_type);

            this.totalData = res.data.data;
            this.total = res.data.total;
            this.area_code = res.data.area_code;
            this.area_title = res.data.area_title;
            this.color = res.data.color;
            this.fashion = res.data.fashion;
            this.house = res.data.house;
            this.house_type = res.data.house_type;
            this.layer = res.data.layer;
            this.material = res.data.material;
            this.number = res.data.number;
            this.position = res.data.position;
            this.product_title = res.data.product_title;
            this.product_type = res.data.product_type;
            this.state = res.data.state;
            this.unit = res.data.unit;
            this.url_number = res.data.url_number;
            this.work = res.data.work;
            this.copy_form = this.searchData;
            
          });
      }
    },
    uploadError(err) {
      this.$Message.error(err.msg || "导入失败");
    },
    uploadSuccess(res) {
      if (res.code == 200) {
          console.log(res)
        this.$Message.success(res.msg);
        this.search_state = true;
        this.getData(this.currency_tag);
      } else {
        this.$Message.warning(res.msg || "导入失败");
      }
      // this.page_index = 1;
      //   this.page_size = 10;
      //   this.axios
      //     .post("/api/order_area_details", {
      //       ...this.$route.query,
      //       ...{ page_index: this.page_index, page_size: this.page_size },
      //       order_no:this.saveData.order_no
      //     })
      //     .then((res) => {
      //         console.log(res)
      //       this.totalData = res.msg.data;
      //       this.total = res.msg.total;
      //       this.area_code = res.msg.area_code;
      //       this.area_title = res.msg.area_title;
      //       this.color = res.msg.color;
      //       this.fashion = res.msg.fashion;
      //       this.house = res.msg.house;
      //       this.house_type = res.msg.house_type;
      //       this.layer = res.msg.layer;
      //       this.material = res.msg.material;
      //       this.number = res.msg.number;
      //       this.position = res.msg.position;
      //       this.product_title = res.msg.product_title;
      //       this.product_type = res.msg.product_type;
      //       this.state = res.msg.state;
      //       this.unit = res.msg.unit;
      //       this.url_number = res.msg.url_number;
      //       this.work = res.msg.work;
      //       this.copy_form = this.searchData;
      //     });
    },
    save() {
      if (
        !this.formData.order_no &&
        !this.formData.residential_name &&
        !this.formData.abbreviation &&
        !this.formData.custom_title &&
        !this.formData.warning_state
      ) {
        this.$message.error("请填写必要信息！");
      } else {
          this.formData.service_id = this.formData.nickname_id;
        this.axios
          .post("/api/order_area_save", { ...this.formData })
          .then((res) => {
            this.$message.success(res.msg);
            this.save_state = true;
          });
      }
    },
    goback() {
      this.$router.go(-1);
    },
    handleTabsAdd() {
      this.tabs++;
    },
    search() {
    //   this.search_state = true;
    console.log(this.currency_tag,'haha')
      this.getData(this.currency_tag);
      
    },
  },
};
</script>
<style scoped lang="scss">
.changeDetail {
  .content {
    overflow: auto;
    height: 90%;
    .form_content {
      display: flex;
      flex-wrap: wrap;
    }
    .card {
      .form_middle {
        .form_middle_content {
          display: flex;
          flex-wrap: wrap;
        }
      }
    }
  }
}
.ivu-form-item {
  width: 250px;
}
.upload {
  display: flex;
  justify-content: space-around;
}
.items {
  width: auto;
  height: 50px;
  margin: auto;
//   overflow: hidden;
  border-radius: 5px;
  position: relative;
  img {
    max-width: 50px;
    max-height: 50px;
  }
}
</style>